本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！
大家好，我是大澈！
本文约 700+ 字，整篇阅读约需 1 分钟。
今天分享一段优质 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 -