效果

滚动条非匀速滚动，由快到慢效果。

主要 api ,属性

document.documentElement.scrollTop：

获取滚动条距离顶部高度，给它赋值可以设置滚动条高度。浏览器支持度：支持谷歌， 火狐， IE10+

setInterval 定时器

基本思路

点击返回到顶部按钮的时候，执行函数；

函数首先获取当前滚动条距离顶部的高度，然后新建一个定时器；

定时器内部执行

document.documentElement.scrollTop 接收 当前的滚动条距离顶部的高度减去（当前滚动条距离顶部的高度 / 一个用来控制滚动条速度的数字）。

公式：

document.documentElement.scrollTop -Math.ceil(document.documentElement.scrollTop / 10)、

if (document.documentElement.scrollTop <= 0) clearInterval(timer)

			function handleTop (e, count = 30) {				document.documentElement.scrollTop				let timer = null				timer = setInterval(function () {					document.documentElement.scrollTop = document.documentElement.scrollTop - Math.ceil(document.documentElement.scrollTop / count)					if (document.documentElement.scrollTop <= 0) clearInterval(timer)				}, 10)			}

到此已经实现了，核心就两行代码。

扩展API

获取网页总高度（网页可视区域高度加滚动条滚动至底部高度）

document.documentElement.scrollHeight

获取网页可视区域宽高

document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

获取滚动条位置，设置滚动条位置(支持谷歌， 火狐， IE最新版)

document.documentElement.scrollTop

获取屏幕距离上下左右距离：

var div = document.getElementById(obj);

var topLength = div.getBoundingClientRect().top; //div离屏幕上边距离（长度）

var bottomLength = div.getBoundingClientRect().bottom; //div离屏幕下边距离（长度）

var leftLength = div.getBoundingClientRect().left; //div离屏幕左边距离（长度）

var rightLength = div.getBoundingClientRect().right; //div离屏幕右边距离（长度）