回到顶部

大家或多或少都会遇到“回到顶部”这样的需求，在此分享这个技术点以及可能遇到的问题。再分析element源码。

回到顶部代码实现

kinghiee - 回到顶部 - demo
回到顶部

回到顶部关键技术点在backTopClickHandle函数中

function  backTopClickHandle() {if (this.timer) return;  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动条高度 (注意点：1)this.timer = setInterval(() => {const speed = Math.floor(-scrollTop / 8); // 获取-scrollTop / 8 小于等于计算值的最大整数，作为滑动速度scrollTop = document.documentElement.scrollTop = document.body.scrollTop = scrollTop + speed; // 赋值if(scrollTop <= 0) {clearInterval(this.timer);this.timer = undefined;}}, 10); // (注意点：2)
}

在该函数中，首先判断当前是否存在定时器，如果有下面步骤不执行。否则获取滚动条高度, 启动定时器，在定时器中计算出当前滑动速度，并计算出当前滚动条高度。
最后如果滚动条高度小于等于0，清除定时器。

在backTopClickHandle函数中有两点需要特别注意

注意点 1：获取scrollTop的位置

let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动条高度 (注意点：1)// 该语句一定要在this.timer = setInterval(() => {...}),前获取scrollTop值，不能在setInterval(() => {...})内获取

scrollTop的位置在setInterval(() => {…})内，效果图如下

会发现，点击回到顶部，在回到顶部这段时间内，如果再次滑动滚轮，就会出现上图的状态。

注意点 2：定时器时间间隔

定时器时间间隔尽量小，会好在15ms~30ms之间。如果时间间隔过大，短时间内滚动条滑不到顶部，这时如果鼠标有交互，会带来不好的交互体验。

Element 回到顶部源码分析

可以看到，除了对scroll监听加了节流外，其余的思想大致相同。主要分析scrollToTop函数

scrollToTop函数分析

scrollToTop() {const el = this.el; // 获取元素const beginTime = Date.now(); // 获取当前时间戳const beginValue = el.scrollTop; // 获取当前滚动条位置const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16)); // 注意点 1const frameFunc = () => {const progress = (Date.now() - beginTime) / 500;if (progress < 1) { // 和0.5s做对比，小于0.5秒执行下面步骤el.scrollTop = beginValue * (1 - easeInOutCubic(progress));rAF(frameFunc); // 循环} else {el.scrollTop = 0;}};rAF(frameFunc);
}

注意点1

const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));

调用循环时，首先判断了当前环境是否存在requestAnimationFrame，如果不存在，则使用性能稍微差点的setTimeout。

优先使用requestAnimationFrame的主要优势时因为

1.经过浏览器优化，动画更流畅
2.窗口没激活时，动画将停止，省计算资源
3.更省电，尤其是对移动终端

requestAnimationFrame最大的优势是

由系统来决定回调函数的执行时机。具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题.