“返回顶部”按钮的实现

在很多地方，我们都会用到“返回顶部”按钮。那么这个要怎么实现呢？

1、html代码

<button class="back_to_top">返回顶部</button>

2、css代码

.back_to_top{
    position: fixed;
    bottom:30px;
    right: 30px;
    border:1px solid #888;
}

3、js代码

    var backButton=$('.back_to_top');
    function backToTop() {
        $('html,body').animate({
            scrollTop: 0
        }, 800);
    }
    backButton.on('click', backToTop);

    $(window).on('scroll', function () {/*当滚动条的垂直位置大于浏览器所能看到的页面的那部分的高度时，回到顶部按钮就显示 */
        if ($(window).scrollTop() > $(window).height())
            backButton.fadeIn();
        else
            backButton.fadeOut();
    });
    $(window).trigger('scroll');/*触发滚动事件，避免刷新的时候显示回到顶部按钮*/

要点：获取滚动条的垂直偏移，即当前页面顶端到整个页面顶端的距离    $(window).scrollTop() 或者$(document).scrollTop() ，但是前者更兼容

$(window).height()   获取当前浏览器窗口的大小，浏览器拉伸大小就会变

$(document).height()  获取整个文档的高度