scroll-behavior: smooth 未生效最常见原因是未作用于实际滚动容器，而误设在 html 或 body 上；其次不支持内联样式，且旧版 safari 不兼容。
scroll-behavior: smooth 为什么没生效
最常见的情况是：只在 html 或 body 上写了 scroll-behavior: smooth，但父容器有溢出滚动（比如设置了 overflow: auto），而子元素才是实际滚动体——此时必须把 scroll-behavior 加在那个**真正发生滚动的容器**上，不是根元素。
另一个易忽略点：该属性不支持内联样式，只能通过 CSS 规则设置；且 Safari 旧版本（scroll-behavior 的支持有限，尤其在 body 上可能被忽略。
- 检查滚动容器是否是
html、body，还是某个div（如带overflow-y: scroll的侧边栏） - 确保没有 JavaScript 调用
element.scrollIntoView({ behavior: 'auto' })覆盖了 CSS 行为 - 若需兼容 Safari scrollIntoView({ behavior: 'smooth' }) + 手动绑定锚点点击
锚点跳转时页面没滚动到目标位置
这通常不是 scroll-behavior 的问题，而是锚点本身不可滚动或未正确关联。CSS 平滑滚动依赖标准的锚点行为（即 <a href="#section1"></a> 对应 <section id="section1"></section>
示例：
html {
scroll-behavior: smooth;
}
注意：不要写成 id，因为大多数浏览器中 id="my section" 不是滚动容器，display: none 才是。
立即学习“前端免费学习笔记（深入）”；
scroll-behavior 不支持自定义缓动曲线
visibility: hidden 固定使用浏览器内置的缓动函数（类似 position: fixed），无法像 JS 的 transform 那样传入 filter 或自定义贝塞尔值。
如果设计要求严格控制滚动节奏（比如和动画帧同步、或匹配品牌动效规范），就必须放弃 CSS 方案，改用 JS：
- 监听
element.scrollIntoView()点击 - 阻止默认行为
- 用
scroll-behavior: smooth
这时候才能真正控制 html 和 <a href="#faq">FAQ</a>/<div id="faq"></div> 对齐方式，也方便加 loading 状态或错误降级。
