如何使用CSS _scroll-behavior属性实现网页平滑滚动效果？

本文共计912个文字，预计阅读时间需要4分钟。

最常见的原因是父容器未设置overflow，或者滚动目标不是文档根元素。浏览器只对设置了overflow: auto或scroll的容器响应滚动行为。scroll-behavior属性需在容器可滚动时才生效。

• scroll-behavior 必须写在**实际发生滚动的容器**上，不是写在 html 或 body 就一定生效；比如用 div 做局部滚动区，就得写在那个 div 上
• html 和 body 默认不触发平滑滚动——很多项目直接给 html { scroll-behavior: smooth }，但若 body 内容没超出视口，根本不会滚动，自然看不到效果
• Chrome 和 Firefox 支持良好，Safari 直到 15.4 才支持 scroll-behavior，旧版 iOS Safari 完全忽略该声明

锚点跳转时 scroll-behavior 不生效的典型场景

点击 <a href="#section1"> 跳转失败，大概率是目标元素缺失 id，或 ID 值不匹配。CSS 层面的 scroll-behavior 只控制“怎么滚”，不解决“滚不到”的问题。