回到顶部特效

涉及技术点：

定时器setInterval()使用；
页面可视区的高度clientHeight/滚动条距离顶部的高度scrollTop；
scroll/click事件。
按钮的隐藏与显示

代码实现：

HTML代码部分

<a href="javascript:;" id="btn" title="回到顶部"></a>
<div class="bg">
    <img src="images/tb_bg.jpg" alt="" />
</div>
<!-- <a href="javascript:;"，解释：
href="javascript:;"作用是：阻止浏览器默认行为；；；若为空，默认调到顶部
javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。
也可以理解为：href="javascript:;"就是去掉a标签的默认行为，跟href="javascript:void(0)"是一样的。
 -->

Javascript代码部分：

window.onload = function(){
    var obtn = document.getElementById('btn');
    //获取页面可视区的高度
    var clientHeight=document.documentElement.clientHeight;
    var timer = null;
    var isTop = true;
    window.onscroll=function(){
        var osTop=document.documentElement.scrollTop || document.body.scrollTop;
            if (osTop >= clientHeight){
            obtn.style.display="block"; //显示按钮
        }else {
            obtn.style.display="none"; //隐藏按钮
        }
        if (!isTop){
            clearInterval(timer);
        }
        isTop = false;
    };  
    obtn.onclick = function(){
        //设置定时器
        timer = setInterval(function(){
            //获取滚动条距离顶部的高度
            var osTop=document.documentElement.scrollTop || document.body.scrollTop;
            var ispeed = Math.floor(-osTop / 6);//使用ispeed是使回到顶部呈现动画效果，逐渐变慢。
            document.documentElement.scrollTop = document.body.scrollTop = osTop +ispeed;
            isTop = true;
            console.log(osTop -ispeed);
            if (osTop === 0){
                clearInterval(timer);
            }
        },30);
    };
    
};
/*
var ispeed = Math.floor(-osTop / 6);//使用ispeed是使回到顶部呈现动画效果，逐渐变慢。
            document.documentElement.scrollTop = document.body.scrollTop = osTop +ispeed;
这里不使用如下代码：
var ispeed = Math.floor(osTop / 6);
document.documentElement.scrollTop = document.body.scrollTop = osTop - ispeed;
当上面osTop的值小于6这个除数时，ispeed的值始终等于0（向下取整了），所以问题来了，当ispeed的值不变时，osTop - ispeed 这个控制滚动条的值也就不变了，所以滚动条永远到不了顶。
其实改负数的目的就是让ispeed的值不为0.
实际中，当osTop = 5（或小于5时），Math.floor(osTop / 6) 的值为 -1，这样就使得 osTop + ispeed 的值始终能减小下去，直至到0.
也可以这样写：
var ispeed = Math.ceil(osTop / 6);
document.documentElement.scrollTop = document.body.scrollTop = osTop - ispeed;
*/