平滑滚动到页面顶部？分享 1 段优质 JS 代码片段！

程序员大澈2024-07-04 16:00

本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 700+ 字，整篇阅读约需 1 分钟。

今天分享一段优质 JS 代码片段，通过简单的逻辑实现了平滑滚动到顶部的效果，增强了用户体验。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

js 复制代码

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop
  
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop)
    window.scrollTo(0, c - c / 8)
  }
}

分享原因

这段代码的目的是实现一个平滑滚动回到页面顶部的功能。

它通过逐步减少页面滚动位置的方式，创建了一个平滑的滚动动画效果，这在用户体验中比瞬间滚动更友好。

代码解析

1. const c = document.documentElement.scrollTop || document.body.scrollTop;

获取当前滚动位置。

document.documentElement.scrollTop：获取整个文档的滚动高度，适用于大多数现代浏览器。

document.body.scrollTop：兼容一些老旧浏览器，它们使用 document.body 作为滚动容器。

两者结合，确保在所有浏览器中都能获取到当前的滚动位置。

2. if (c > 0)

检查当前滚动位置是否大于0。

判断页面是否已经滚动到了顶部，如果已经在顶部（c <= 0），则不需要继续滚动。

3. window.requestAnimationFrame(scrollToTop);

请求下一帧动画。

使用 requestAnimationFrame 来递归调用 scrollToTop，这是一种浏览器优化的方法，用于实现平滑动画效果。

它告诉浏览器在下一次重绘之前调用指定的函数，从而创建流畅的动画。

4. window.scrollTo(0, c - c / 8);

平滑滚动到顶部。

window.scrollTo(x, y)：将窗口滚动到指定的位置。

c - c / 8：每次将当前滚动位置减少当前滚动位置的八分之一，这样滚动速度会逐渐减慢，形成一个平滑的滚动效果。

end -