简单实现回到顶部

avatar 2016年9月18日14:27:33 3

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

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);
    });
});
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:3   其中:访客  3   博主  0

    • avatar 逆向 0

      嗨,你好吗?伟大的博主!

      • avatar 三五 0

        仔细瞧瞧再说!

        • avatar 任务 0

          月黑风高夜,访问博客时!