JavaScript实现的回到顶部效果

window.onload = function() {
    var btn = document.getElementById(‘btn‘);
    var timer = null;
    var isTop = true;

    var clientHeight = document.documentElement.clientHeight;

    window.onscroll = function() {
        var osTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条高度，不同浏览器获取方式不同

        //控制回到顶部按钮的显示，如果滚动条的高度大于屏幕的高度就显示
        if(osTop >= clientHeight) {
            btn.style.display = ‘block‘;
        } else {
            btn.style.display = ‘none‘;
        }

        //在滚动过程中，用户若滑动鼠标滚轮即可停止滑动
        if(!isTop) {
            clearInterval(timer);
        }
        isTop = false;
    }

    btn.onclick = function() {
        //每隔30ms执行一个，每次的速度逐渐减小，成为一种缓动效果，越靠近顶部越慢。
        timer = setInterval(function() {
            var osTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条高度
            var iSpeed = Math.floor(-osTop / 6);
            document.documentElement.scrollTop = document.body.scrollTop = osTop + iSpeed;
            isTop = true;

            if(osTop == 0) {
                clearInterval(timer);
            }
        }, 30);

    }
}