jq回到顶部按钮

1、html代码



返回顶部



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()  获取整个文档的高度