柠喵的布洛阁
一个从网上找来的“回到顶部”实现方案
2020-09-06  分类: 网上找来的实现方案的记录   标签: JavaScript  

过去在网上找过了无数次“回到顶部”的实现方案,终于找到一个比较完美的了,把它记录下来方便下次使用(复制粘贴大法真好用)

直接上代码吧,原作者也写了一些注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/**
* 缓冲函数
* @param {Number} position 当前滚动位置
* @param {Number} destination 目标位置
* @param {Number} rate 缓动率
* @param {Function} callback 缓动结束回调函数 两个参数分别是当前位置和是否结束
*/

const easeout = function (position, destination, rate, callback) {
if (position === destination || typeof destination !== 'number') {
return false;
}
destination = destination || 0;
rate = rate || 2;
// 不存在原生`requestAnimationFrame`,用`setTimeout`模拟替代
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (fn) {
return setTimeout(fn, 17);
}
}
const step = function () {
position = position + (destination - position) / rate;
if (Math.abs(destination - position) < 1) {
callback(destination, true);
return;
}
callback(position, false);
requestAnimationFrame(step);
};
step();
}
const scrollTopSmooth = (position) => {
// 当前滚动高度
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
easeout(scrollTop, position, 5, function (val) {
window.scrollTo(0, val);
});
}

后续需要滑动到顶部时只需调用scrollTopSmooth方法了

评论区