返回顶部效果

在页面中经常需要使用到返回顶部按钮，如果页面内容过多过长，手动去滑动滚动条比较麻烦，所以大部分的页面都会出现返回顶部按钮，一键回到顶部中，可以增强用户体验。

实现回到顶部效果的主要方法：达到回到顶部效果的主要原理就是修改滚动条距离顶部的位置为0。

下面这种是无动画效果回到顶部：

这种就很简单，直接修改滚动条距离顶部的位置为0。

下面这种是有动画效果回到顶部：

主要思路：设置一个定时器，再获取滚动条距离顶部的高度，再获取速度，点击回到顶部后，再把定时器清除。

这里我们需要注意的是 document.documentElement.scrollTop与document.body.scrollTop的区别，前者是获取元素可视区域高度，后者是获取body元素高度，其中这里因为滚动条有缓动的效果，就是随着滚动条靠近页面的顶部，滚动条运动的速度越来越慢，这里主要运用了js的SetInterval
方法来实现。

实现“回到顶部”功能的方法还有很多，并且还可以添加更好看的样式来美化视觉效果。