CSS를 사용하면 상단 효과로 빠르게 복귀할 수 있습니다.

배경:

요즘 웹사이트는 기본적으로 페이지가 깁니다. 대부분은 화면이 4~5개이고 일부는 화면이 2~3개인 경우도 있습니다. 페이지가 너무 길면 사용자 경험을 개선하기 위해 답변이 표시되는 경우도 있습니다. 페이지 오른쪽에 표시됩니다. 상단으로 돌아가는 방법은 일반적으로 4가지가 있습니다.

1. 앵커 링크를 통해 상위로 돌아가려면 본문에 top이라는 태그를 추가해야 합니다

<a href="#top" target="_self">回到顶部</a>

2. JavaScript 스크롤을 통해 상위로 돌아가고, 가로 및 세로 방향을 제어합니다

<a href="javascript:scroll(0,0)">JavaScript回到顶部<s/a>

3. JavaScript를 통해 제어, 천천히 위로 이동 슬라이딩하지만 충분히 부드럽지 않습니다

<a onclick="goScrollTop()">JavaScript缓慢向上滑动</a>

function goScrollTop() {
    //把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数）
    //向上是负数，向下是正数
    window.scrollBy(0, -100);
    //延时递归调用，模拟滚动向上效果
    scrolldelay = setTimeout('goScrollTop()', 100);
    //获取scrollTop值，声明了DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值
    var sTop = document.documentElement.scrollTop + document.body.scrollTop;
    //判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面）
    if (sTop == 0) clearTimeout(scrolldelay);
}

4. 스크롤바가 특정 위치로 스크롤되면 표시되며, 스크롤바가 다시 위로 올라가면 위쪽으로 돌아가기 버튼이 숨겨집니다. 메소드가 가장 일반적으로 사용되는 메소드입니다

<div class="goTop">
    <span>Go</span>
</div>

j쿼리 코드:

function goTop(min_height) {
    $(".goTop").click(
        function() {
            $('html,body').animate({
                scrollTop: 0
            }, 700);
        });
    //获取页面的最小高度，无传入值则默认为600像素
    min_height=min_height?min_height:400;
    //为窗口的scroll事件绑定处理函数
    $(window).scroll(function() {
        //获取窗口的滚动条的垂直位置
        var s = $(window).scrollTop();
        //当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐
        if (s > min_height) {
            $(".goTop").fadeIn(100);
        } else {
            $(".goTop").fadeOut(200);
        }
    });
}
 
 
$(function() {
    goTop();
});

css 코드:

.goTop {
    height: 40px;
    width: 40px;
    background: red;
    border-radius: 50px;
    position: fixed;
    top: 90%;
    right: 3%;
    display: none;
}
 
.goTop span {
    color: #fff;
    position: absolute;
    top: 12px;
    left: 8px;
}

추천 튜토리얼: css 빠른 시작

백투톱 효과 코드를 다운로드하려면 다음을 수행하세요. 방문: 최상위 코드 열로 돌아가기!

위 내용은 CSS를 사용하면 상단 효과로 빠르게 복귀할 수 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!