页面平滑滚动可通过多种方式实现。1. 使用css的scroll-behavior: smooth属性实现最简单，但兼容性较差；2. 通过window.scrollto()或window.scrollby()结合requestanimationframe或settimeout实现动画效果，灵活性高；3. 利用jquery的animate()方法，便捷但增加依赖；4. 使用element.scrollintoview()方法，现代且用法简单；5. 手写缓动函数如easeinoutcubic，自由度最高但需要数学基础。优化方面需控制速度在300-800ms、选择合适缓动函数、避免滚动劫持及考虑移动端性能。应用场景包括锚点链接、返回顶部按钮、单页应用、内容导航及图片轮播。
页面平滑滚动，说白了，就是让页面滚动的时候别那么“Duang”一下就到位，而是像抹了油一样，缓缓地滑动到指定位置。实现方法还真不少，各有千秋，就看你喜欢哪种口味了。
解决方案（直接输出解决方案即可）
-
CSS
scroll-behavior: smooth：最简单粗暴的方式
一行CSS代码就能搞定，简直是懒人福音。直接在
html或者body上加上scroll-behavior: smooth;，整个页面的所有锚点链接滚动就都平滑了。html { scroll-behavior: smooth; }简单是真简单，但是兼容性稍微差一点，老版本浏览器可能不支持。
-
window.scrollTo()或window.scrollBy()：JS原生方法这两个方法可以控制页面滚动到指定位置。想要平滑滚动，就得配合
requestAnimationFrame或者setTimeout来实现动画效果。function scrollToSmoothly(pos, time) { let currentPos = window.pageYOffset; let start = null; window.requestAnimationFrame(function step(currentTime) { start = start || currentTime; let progress = currentTime - start; let percentage = Math.min(progress / time, 1); window.scrollTo(0, currentPos + (pos - currentPos) * percentage); if (progress < time) { window.requestAnimationFrame(step); } }); } // 使用示例：滚动到页面顶部 scrollToSmoothly(0, 500); // 500ms内滚动到顶部这个方法比较灵活，可以自定义滚动速度和动画效果。
-
使用第三方库：例如 jQuery 的
animate()如果你已经用了 jQuery，那就可以直接用它的
animate()方法来实现平滑滚动。$("html, body").animate( { scrollTop: $("#target").offset().top, }, 1000 ); // 1000ms内滚动到#target元素的位置方便快捷，但会增加页面依赖，如果只是为了一个滚动效果引入整个 jQuery，就有点得不偿失了。
-
使用
Element.scrollIntoView()：更现代的方式scrollIntoView()方法可以让指定的元素滚动到可视区域。可以传入一个behavior参数来控制滚动行为。document.getElementById("target").scrollIntoView({ behavior: "smooth", block: "start", // 或者 'end', 'center', 'nearest' });这个方法相对比较新，兼容性也还不错，而且用法简单。
自己手写缓动函数：终极自定义方案
如果你对滚动效果有极致的要求，可以自己手写缓动函数，比如使用贝塞尔曲线来控制滚动速度。
function easeInOutCubic(t) {
return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
}
function scrollToSmoothlyCustomEase(pos, time, easingFunction) {
let currentPos = window.pageYOffset;
let start = null;
window.requestAnimationFrame(function step(currentTime) {
start = start || currentTime;
let progress = currentTime - start;
let percentage = Math.min(progress / time, 1);
// 使用自定义缓动函数
let easedPercentage = easingFunction(percentage);
window.scrollTo(0, currentPos + (pos - currentPos) * easedPercentage);
if (progress < time) {
window.requestAnimationFrame(step);
}
});
}
// 使用示例：
scrollToSmoothlyCustomEase(document.getElementById("target").offsetTop, 800, easeInOutCubic);这种方式的自由度最高，但是也需要一定的数学基础和耐心。
如何优化平滑滚动效果，提升用户体验？
平滑滚动虽然能提升用户体验，但如果用不好，反而会适得其反。比如滚动速度太慢，用户会觉得卡顿；滚动速度太快，又失去了平滑的意义。所以，优化滚动效果很重要。
控制滚动速度： 滚动速度要适中，一般来说，300-800ms的滚动时间比较合适。可以根据页面内容长度和用户习惯来调整。
选择合适的缓动函数： 缓动函数决定了滚动的加速度和减速度。常用的缓动函数有
ease-in、ease-out、ease-in-out等。可以根据实际情况选择合适的缓动函数，或者自定义缓动函数。避免滚动劫持： 滚动劫持是指通过JS代码完全控制页面的滚动行为。虽然可以实现一些炫酷的效果，但会破坏用户的滚动习惯，影响用户体验。尽量避免使用滚动劫持，除非有非常特殊的需要。
考虑移动端性能： 在移动端，性能是关键。尽量避免使用复杂的JS动画，可以使用CSS3动画来提升性能。另外，要注意减少重绘和重排，避免引起页面卡顿。
平滑滚动在实际项目中的应用场景有哪些？
平滑滚动的应用场景非常广泛，几乎所有的网站都可以用到。
锚点链接： 这是最常见的应用场景。通过平滑滚动，可以让用户在点击锚点链接时，页面平滑地滚动到指定位置，而不是直接跳过去。
返回顶部按钮： 几乎所有的网站都有返回顶部按钮。通过平滑滚动，可以让用户点击按钮后，页面平滑地滚动到顶部，而不是瞬间回到顶部。
单页应用（SPA）： 在单页应用中，页面内容是通过JS动态加载的。通过平滑滚动，可以实现页面之间的平滑切换，提升用户体验。
内容导航： 在一些内容较长的页面中，可以使用内容导航来帮助用户快速定位到感兴趣的内容。通过平滑滚动，可以让用户点击导航链接后，页面平滑地滚动到对应的内容区域。
图片轮播： 在图片轮播中，可以使用平滑滚动来实现图片之间的平滑切换，增加视觉效果。
