JQuery实现回到顶部

当一个页面的内容比较长时，一般都在页面的右下角的固定位置有个“回到顶部”的按钮，点击后，页面的滚动条逐渐回滚到顶部，本篇来描述一个它的实现过程。

首先，需要有一个按钮

<button id="btn_top" title="回到顶部">
    回到顶部
</button>

然后给这个元素定位到右下角，我们使用position：fixed。下面这个按钮加一些最基本的样式

#btn_top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: none;
}

此时，这个按钮并没有显示出来，我们需要当页面的滚动条距离最上方有50个像素时，显示“回到顶部”按钮，通过JQuery来实现

$(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() >= 50) {
            $(‘#btn_top‘).fadeIn();
        }
        else {
            $(‘#btn_top‘).fadeOut();
        }
    });
});

最后，我们给“回到顶部”的按钮添加一个click事件，通过一个动画来让滚动条滚到最上面

$(‘#btn_top‘).click(function () {
    $(‘html,body‘).animate({ scrollTop: 0 }, 500);
});

好，大功告成！