JavaScript实现的回到顶部效果

参考自：http://www.imooc.com/learn/65

几乎所有的网站都会有回到顶部的功能，可以直接用锚点（#）实现，但是跳转的很生硬。

1、使用插件，我之前在介绍两个JQuery插件 — 滚动和轮播说过一个滚动插件，使用效果不错。

我在自己的小项目使用了：旅行笔记

2、原生的JS实现。

有两个点，一个是window 的滚动事件：window.onscroll，另一个是setInterval和clearInterval。

具体内容见代码，里面注释了。

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);

    }
}

JavaScript实现的回到顶部效果