jQuery 返回顶部代码分享

Question

返回顶部可以说是一个网站必备的功能，特别是很长的网页，方便用户能够一次性的返回导航条，而无需手动滑动，这篇文章将给大家分享一个简单的返回顶部代码。

示例地址：http://run.wenjiangs.com/code/#/?code=enSxkp25

返回顶部代码其实很简单，我们使用 jQuery 的自定义动画就能做出一定的缓冲效果，比起直接跳转，看起来更适合网页的展现，首先我们需要一个返回顶部的按钮，比如下面的 HTML 代码：

<div class="backtop" title="回到顶部">TOP</div>

我们添加一点样式：

.backtop{
    position:fixed;
    right:30px;
    bottom:-50px;
    width:40px;
    height:40px;
    line-height:30px;
    font-size:12px;
    color:#FFF;
    text-align:center;
    cursor:pointer;
    background-color:#333;
    border-radius:6px 6px 0 0;
    box-shadow:0 0 3px rgba(0, 0, 0, 0.3);
}

当鼠标移动到按钮上面的时候，我们改变其背景颜色：

.backtop:hover {
    background-color:#21d2af;
}

好了基本的样式我们就编写完成了，接下来我们来看看 JavaScript 代码。

首先返回顶部的按钮并不是一开始就显示的，我们设置为当用户滑动网页 200px 的时候，才显示返回顶部的按钮：

$(window).scroll(function(){
    var y_height = document.documentElement.scrollTop + document.body.scrollTop;
    //兼容ie:document.documentElement.scrollTop
    if(y_height > 200){
        $(".backtop").stop().animate({bottom:"-10px"},300);
        //当滚动鼠标大于200px时出现
    }else{
        $(".backtop").stop().animate({bottom:"-50px"},300);
        //当小于200px时不出现
    }
});

当用户点击按钮的时候，我们返回顶部：

$(".backtop").click(function(){
    $("html, body").animate({scrollTop:"0px"}, 300);
});