JS回到顶部效果设计总结

回到顶部效果的基本思路：

1. 创建一个a标签，display设置为none

2. 在JS文件中注册click事件，利用回调函数setInterval()不断减少document.body.scrollTop的数值直到为0，并检查是否为0，如果是则调用clearInterval()

3. 为了显示返回顶部时的缓冲效果，设置一个速度speed，是top的五分之一，每次document.body.scrollTop减少的数值则为speed

4. 为了达到第二屏才显示返回顶部按键的效果，在window.onscroll的事件上注册判断函数：当document.body.scrollTop（滚动条离整个网页页面顶端的距离）大于或等于document.documentElement.clientHeight（网页页面实际可视距离）时，才将a标签的display设置为block

具体代码：

window.onload = function () {
var timer = null;
var backTop = document.getElementById('backTop');
var height = document.documentElement.clientHeight;

window.onscroll = function(){
if(document.body.scrollTop >= height)
{
backTop.style.display = "block";
}
else{
backTop.style.display = "none";
}
};

backTop.addEventListener('click', function(){
timer = setInterval(function(){
var top = document.body.scrollTop;
var speed = top / 5;
document.body.scrollTop = top - speed;

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

//代码来自极客学院教程http://www.jikexueyuan.com/course/342_2.html?ss=1

其中，document.body指的是整个文档中的body标签，当文档在浏览器中被渲染成页面时是整个页面的长度；而document.documentElement指的是当前页面的可视区域。