实现对一个元素的滚动条进行平滑滚动至顶部的动画效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了实现对一个元素的滚动条进行平滑滚动至顶部的动画效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.elementUI中的平滑滚动至顶部的动画效果代码

const cubic = value => Math.pow(value, 3);
const easeInOutCubic = value => value < 0.5
? cubic(value * 2) / 2
: 1 - cubic((1 - value) * 2) / 2;

const el = this.el;
const beginTime = Date.now();
const beginValue = el.scrollTop;
const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
const frameFunc = () => {
const progress = (Date.now() - beginTime) / 500;
if (progress < 1) {
el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
rAF(frameFunc);
} else {
el.scrollTop = 0;
}
};
rAF(frameFunc);

/**

下面是代码的逐行解释：

定义一个函数 cubic，接收一个参数 value，返回 value 的三次方。
定义一个函数 easeInOutCubic，接收一个参数 value，并根据 value 的值计算出在动画过程中的缓动效果，使其在开始和结束时速度较慢，在中间过程速度较快。
定义一个变量 el，表示当前操作的元素对象。
定义一个变量 beginTime，记录动画开始的时间。
获取 el 元素的当前滚动高度（距离顶部的距离），并将其赋值给变量 beginValue。
定义一个变量 rAF，使用浏览器的 requestAnimationFrame 方法（如果不支持，则使用 setTimeout 方法代替）。
定义一个函数 frameFunc，用于在每一帧中执行滚动的计算和更新。
计算动画的进度值 progress，表示从动画开始到现在所经过的时间占总动画时间（这里是500毫秒）的百分比。
判断 progress 是否小于 1，若小于 1，则说明动画尚未完成，继续执行以下操作：
利用 easeInOutCubic 函数计算当前帧的滚动条距离顶部的位置，并更新 el 元素的滚动高度。
使用 rAF 函数请求下一帧继续执行 frameFunc。
若 progress 不小于 1，则说明动画已经完成，将 el 元素的滚动条滚动至顶部。
调用 rAF 函数，传入 frameFunc，开始执行动画。
总结：这段代码使用了 requestAnimationFrame 和 easeInOutCubic 缓动函数来实现一个元素滚动条的平滑滚动至顶部的动画效果。


*/

2.将上面的代码简化

const el = this.el;
const duration = 500;
const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));

const scrollToTop = (startTime, startValue) => {
  const currentTime = Date.now();
  const progress = Math.min(1, (currentTime - startTime) / duration);

  el.scrollTop = startValue * (1 - progress);
  
  if (progress < 1) {
    rAF(() => scrollToTop(startTime, startValue));
  }
};

const beginTime = Date.now();
const beginValue = el.scrollTop;
rAF(() => scrollToTop(beginTime, beginValue));

/**
1.移除了 cubic 和 easeInOutCubic 函数，直接使用线性插值计算进度，代码更简洁。
2.将 frameFunc 函数改为 scrollToTop 函数，并将其作为递归调用，使代码逻辑更清晰。
    代码的基本逻辑和原来相似，使用 requestAnimationFrame 在每一帧中更新滚动条位置。这里的滚动动画效果将是线性的，即在动画过程中速度恒定。

*/

3.继续简化代码

使用Element.scrollTo方法并使用scroll-behavior: smooth的简化代码示例：

首先，在你的CSS样式表中加入以下代码：
```
html {
  scroll-behavior: smooth;
}
```
这会将平滑滚动的效果应用到整个页面。
然后，使用scrollTo方法在JavaScript中触发滚动到顶部的操作：
```
window.scrollTo({ top: 0, behavior: 'smooth' });
```
这段代码相较于之前的实现更加简洁，因为我们使用了现代浏览器支持的scroll-behavior属性和scrollTo方法。这种方法的优势在于代码简洁，并且使用了原生的浏览器功能，因此性能更好。但请注意，这种方法在某些较旧的浏览器中可能不受支持。如果需要支持更多浏览器，请考虑使用上述更长的代码示例。文章来源地址https://www.toymoban.com/news/detail-511913.html