jojuniori
6/4/2017 - 1:49 PM

JS回到顶部.js

/**
 * back to the top function
 */
const getOffsetHeight = function() {
    return Math.max(document.body.offsetHeight, document.documentElement.offsetHeight);
};

const getClientHeight = function() {
    let clientHeight = 0;
    if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
    } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
    }
    return clientHeight;
};

const getScrollTop = function() {
    let scrollTop = 0;
    if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop;
    } else if (document.body) {
        scrollTop = document.body.scrollTop;
    }
    return scrollTop;
};

const getScrollBottom = function() {
    let scrollBottom = getOffsetHeight() - getClientHeight() - getScrollTop();
    return scrollBottom;
};

window.onscroll = function() {
    if (getOffsetHeight() > getClientHeight()) {
        if (getScrollTop() >= 500 || getScrollBottom() === 0) {
            document.getElementById('backtop').className = 'show';
        } else {
            document.getElementById('backtop').className = '';
        }
    }
};

const pageScroll = function() {
    //IE10+/Android Browser4.4+/  
    let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(clb) {
            return setTimeout(clb, 1000 / 60);
        };

    let cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame ||
        window.webkitCancelAnimationFrame || window.msCancelAnimationFrame ||
        function(id) { clearTimeout(id); };

    let top = document.body.scrollTop || document.documentElement.scrollTop;

    //滚动时长  
    let duration = 200; //200ms  

    //计算步长  
    let step = top / (duration / (1000 / 60)) >> 0; //取整   

    function fn() {
        if (top >= 0) {
            top -= step;
            document.documentElement.scrollTop = document.body.scrollTop = top;
            fn.rafTimer = requestAnimationFrame(fn);
        } else {
            document.body.scrollTop = 0;
            cancelAnimationFrame(fn.rafTimer);
        }
    }
    fn.rafTimer = requestAnimationFrame(fn);
};