jq回到顶部

/*****************回到顶部****************/

.backTop{width:32px;height:48px;position: fixed;bottom:70px;right:18px;}
.backTop img{width:100%;}

$(function () {

    var  backTop=["
",
                "    ",
                "
",
            ].join("");


    $('body').append(backTop);

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

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



})

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

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

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