网页back-top jquery 返回顶部

JS 代码

 $(function() {

     //先将#back-top隐藏
     $('#back-top').hide();

     //当滚动条的垂直位置距顶部100像素一下时，跳转链接出现，否则消失
     $(window).scroll(function() {
         if ($(window).scrollTop() > 100) {
             $('#back-top').fadeIn(1000);
         } else {
             $("#back-top").fadeOut(1000);
         }
     });

     //点击跳转链接，滚动条跳到0的位置，页面移动速度是1000
     $("#back-top").click(function() {
         $('body').animate({
             scrollTop: '0'
         }, 1000);
         return false; //防止默认事件行为
     })
 })

CSS 代码

.wrap {
    height:2000px;
}
.red {
    background:red;
    height:600px;
}
.green {
    background:green;
    height:600px;
}
.yellow {
    background:yellow;
    height:800px;
}
#back-top {
    position:fixed;
    width:60px;
    height:60px;
    bottom:30px;
    right:30px;
    background:#ccc;
    text-align:center;
    line-height:60px;
    text-decoration:none;
}

HTML 代码

<div class="wrap">
    <div class="red">
        内容
    </div>
    <div class="green">
        内容
    </div>
    <div class="yellow">
        内容
    </div>
</div>
<a href="#" id="back-top">Top</a>

from www.jq22.com/webqd4165 by insist