最直接实现平滑滚动的方式是使用css的scroll-behavior: smooth属性，应用于html元素可使整个页面滚动平滑；2. 若仅需局部滚动平滑，则将该属性加在具有overflow: auto或scroll的容器上；3. 当scroll-behavior不生效时，需检查作用对象是否可滚动、是否被高优先级css覆盖、javascript是否强制跳转或用户启用了prefers-reduced-motion导致效果被禁用；4. 可通过javascript的window.scrollto()、window.scrollby()或element.scrollintoview()结合behavior: 'smooth'选项实现更精细控制；5. 平滑滚动优点包括提升视觉引导、增强现代感和降低认知负荷，缺点可能引起部分用户不适、产生感知延迟或因过度使用影响效率，应谨慎使用并尊重用户偏好设置。
HTML实现平滑滚动，最直接、最现代的方式就是利用CSS的
scroll-behavior属性。你只需要把它设置为
smooth，就能让页面的滚动行为从生硬的跳跃变成丝滑的过渡。
解决方案
要让整个页面的滚动变得平滑，通常我会直接将
scroll-behavior: smooth;应用到
html元素上。这样，无论是点击锚点链接跳转，还是通过键盘上下滚动，整个视窗的滚动都会带上动画效果。
html {
scroll-behavior: smooth;
}当然，如果你只是想让某个特定的、内部可滚动的区域实现平滑滚动，比如一个带有
overflow: auto;的
div，那你就把这个属性加到那个
div上。
立即学习“前端免费学习笔记（深入）”；
跳到末尾这是底部
.scrollable-container {
height: 300px;
overflow: auto; /* 关键：让这个容器可滚动 */
scroll-behavior: smooth; /* 让这个容器内部的滚动平滑 */
border: 1px solid #ccc;
padding: 10px;
}这个属性配合HTML的锚点链接（
标签的
href指向
#id），效果尤其好。用户点击链接时，页面不再是瞬间跳转，而是优雅地滑过去，体验感瞬间提升。
为什么我的scroll-behavior: smooth
没有效果？
嗯，这确实是开发者常遇到的一个“小坑”。明明设置了，但就是不生效，让人有点抓狂。我个人在调试的时候，通常会从几个方面去排查：
-
作用对象是不是对？ 这是最常见的。你是不是把它加到了一个根本没有
overflow
属性，或者内容不足以产生滚动的元素上？比如，如果你的页面内容很少，根本不需要滚动，那平滑滚动自然也就无从谈起。再就是，如果你想让整个页面平滑滚动，那得加在html
或者body
上（虽然规范推荐是html
），而不是某个普通的div
。如果只是某个局部容器需要，那容器必须有overflow: auto;
或scroll;
。 -
有没有被其他CSS覆盖？ 检查一下是不是有其他CSS规则优先级更高，把你的
scroll-behavior
给覆盖掉了。比如，某些CSS框架可能会有自己的默认滚动行为设置。用开发者工具检查一下计算样式，看看scroll-behavior
最终的值是什么。 -
JavaScript是不是在作怪？ 这是一个大头。很多时候，我们为了实现一些高级的滚动效果，会引入JavaScript库，或者自己写JS来控制滚动。例如，
window.scrollTo(x, y)
或element.scrollIntoView()
在不指定behavior: 'smooth'
选项时，会直接强制页面瞬间跳转，从而覆盖掉CSS的scroll-behavior
。如果你用了jQuery的animate({scrollTop: ...})，那它也通常会接管滚动。我个人觉得，如果能用CSS解决，就尽量不要用JS，除非你需要更复杂的逻辑控制。 -
用户设置优先？ 这是一个容易被忽略但非常重要的点。现代浏览器和操作系统都提供了“减少动态效果”（
prefers-reduced-motion
）的辅助功能设置。如果用户在系统层面开启了这个选项，浏览器会优先尊重用户的选择，自动禁用所有平滑滚动效果，即使你的CSS里设置了smooth
。这其实是很好的用户体验考量，毕竟不是所有人都喜欢或适合动态效果。
除了CSS，还有哪些方法可以实现平滑滚动？
虽然CSS的
scroll-behavior是首选，但很多时候，我们确实需要更精细的控制，或者在特定场景下CSS无法满足需求，这时候JavaScript就派上用场了。
-
window.scrollTo()
或window.scrollBy()
结合选项： 这是最直接的JS方法。你可以通过传入一个配置对象，来指定滚动行为。// 滚动到页面顶部，平滑过渡 window.scrollTo({ top: 0, behavior: 'smooth' }); // 相对当前位置向下滚动200px window.scrollBy({ top: 200, behavior: 'smooth' }); -
element.scrollIntoView()
结合选项： 当你需要滚动到页面上的某个特定元素时，这个方法非常方便。我要被滚动到这里这个方法特别适合单页应用或者需要聚焦到某个表单字段、提示信息等场景。
历史上的JavaScript库： 过去，在
scroll-behavior
和JS原生支持平滑滚动选项出现之前，大家都是靠各种JavaScript库来实现的，比如jQuery的animate({scrollTop: ...}, 'slow')。这些库通过计算每一帧的位置来模拟平滑滚动。现在，除非项目已经深度依赖这些库，否则我个人更倾向于使用原生CSS或JS API，它们性能更好，也更符合现代Web标准。
说实话，有了这些原生的API，平滑滚动变得异常简单，我们再也不用像以前那样，为了一个平滑滚动效果去引入一个庞大的JS库了。
平滑滚动在用户体验上有什么优缺点？
平滑滚动，在我看来，是一把双刃剑。用得好，能极大提升用户体验；用不好，反而可能适得其反。
优点：
- 视觉引导和上下文感知： 这是它最大的优势。当页面从A点平滑滚动到B点时，用户能清晰地看到页面是如何移动的，这有助于他们理解页面内容的结构和跳转的上下文。比如，在长篇文章中点击目录跳转，平滑滚动能让用户知道自己“跳”了多远，以及新的位置在页面的哪个部分。
- 现代感和专业度： 平滑滚动让网站看起来更精致、更现代化。它提供了一种流畅、无缝的交互体验，给用户留下更好的第一印象。
- 减少认知负荷： 相对于瞬间跳转，平滑过渡能给用户的大脑一个短暂的缓冲时间来处理变化，从而减少了突然的视觉冲击和认知负荷。
缺点：
-
潜在的晕眩或不适： 这点非常关键。有些人，特别是那些对运动敏感的用户（比如容易晕车的人），长时间的平滑滚动或者过快的滚动速度可能会导致不适，甚至引起晕眩。这就是为什么
prefers-reduced-motion
这个辅助功能如此重要的原因。 - 感知上的延迟： 尽管只是几百毫秒的动画，但对于追求极致响应速度的用户来说，这种延迟可能会让他们觉得页面“慢”了一拍，不如瞬间跳转来得直接。
- 过度使用适得其反： 如果网站上到处都是平滑滚动，或者滚动动画时间设置得过长，就会让用户觉得操作起来拖沓、不够高效，反而影响了整体的流畅性。
所以，我的建议是：谨慎使用，并始终尊重用户偏好。 对于长页面内的锚点跳转，平滑滚动效果很好；但在需要快速、频繁交互的场景，或者动画时间过长时，就得好好权衡一下了。始终把用户放在第一位，提供一个可访问、舒适的浏览体验，才是最重要的。
