简单实现一个常用的回到顶部效果:

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
    .dn {
        displaynone;
    }
 
    .go-top {
        positionfixed;
        bottom40px;
        right20px;
        width46px;
        z-index999;
    }
</style>

HTML:

1
2
3
4
5
<body style="height: 3000px;">
    <div class="go-top dn" id="go-top">
    </div>
</body>

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function(){
    $(window).on('scroll',function(){
        var st = $(document).scrollTop();
      //当滚动条的位置处于距顶部300像素以下时,跳转链接出现,否则消失
        if( st>300 ){
            $('#go-top').fadeIn(function(){
                $(this).removeClass('dn');
            });
        }else{
            $('#go-top').fadeOut(function(){
                $(this).addClass('dn');
            });
        }
    });
    //当点击跳转链接后,滚动条跳到0的位置,也就是页面顶部,页面移动速度是500。
    $('#go-top .go').on('click',function(){
        $('html,body').animate({'scrollTop':0},500);
    });
});