vue 监听滚动条距离顶部的距离_原生JS实现返回顶部动画效果

效果

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

主要 api ,属性

document.documentElement.scrollTop：

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

setInterval 定时器

基本思路

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

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

定时器内部执行

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

公式：

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

• 监听滚动条是否到顶，为true 清除定时器

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

代码

function handleTop (e, count = 30) {document.documentElement.scrollToplet timer &#