scroll-behavior: smooth 必须写在 html 元素上才生效，写在 body 上无效；需确保目标元素可见、ID 与 href 严格一致，且未被 transform/overflow/visibility 等样式影响位置计算。
直接加 html { scroll-behavior: smooth; } 就能生效，但 90% 的失败都因为写错了位置、目标不可见，或被样式覆盖。
为什么 scroll-behavior: smooth 写在 body 上没反应
浏览器的滚动根容器是 html 元素，不是 body。CSS 规范明确要求该属性只对实际滚动容器生效。body { scroll-behavior: smooth; } 完全无效，哪怕看起来“好像动了”，那也是巧合或 JS 干预的结果。
- 必须写成
html { scroll-behavior: smooth; }，且放在全局 CSS 中（如style标签或主样式表） - 避免用通配符重置覆盖：
* { scroll-behavior: auto !important; }会直接干掉你的设置 - 某些 UI 框架（如 Ant Design、Chakra UI）或重置库（如 modern-normalize）可能悄悄写了
html, body { scroll-behavior: auto; }，得用开发者工具检查 computed 样式确认是否被覆盖
锚点跳转后还是“瞬移”？先查这三件事
即使 CSS 正确，scroll-behavior: smooth 也只在满足条件时才触发平滑行为。常见静默失效原因：
- 目标元素
id和href值不严格一致：大小写、空格、特殊字符（如id="contact-us"对应href="#contact-us"可以，但href="#contact_us"不行） - 目标元素被隐藏：
display: none、visibility: hidden、父级overflow: hidden或transform都会让浏览器无法计算其位置 - 目标不在默认文档流中：比如用
position: absolute脱离布局，或被包裹在overflow: auto的局部滚动容器里（此时需给那个容器单独设scroll-behavior: smooth）
需要避开固定头部？别在 JS 里硬算偏移
用 scroll-behavior: smooth 时，浏览器默认把目标元素顶部对齐视口顶部，会被 position: fixed 头部遮挡。最稳定的方式是用 CSS 解决：
立即学习“前端免费学习笔记（深入）”；
- 给目标元素加
scroll-margin-top: 80px（数值按头部高度调整），比 JS 动态计算offsetTop - 80更可靠 - 不要依赖
scrollIntoView({ block: 'center' })来“绕开”——它和scroll-behavior是两套机制，混用易冲突 - 如果必须用 JS 触发（如单页路由 hash 变化），请显式传参：
el.scrollIntoView({ behavior: 'smooth', block: 'start' })；不传behavior就是瞬移
移动端 Safari 或旧版 Firefox 不生效？不是兼容性问题，是系统设置
Chrome 61+、Firefox 68+、Edge 79+、Safari 15.4+ 均原生支持。所谓“不工作”，大概率是用户开启了系统级动画限制：
- macOS：「系统偏好设置 → 辅助功能 → 显示 → 减少运动」开启后，所有
scroll-behavior: smooth被强制禁用 - Windows：「设置 → 辅助功能 → 视觉效果 → 简化动画」同理
- 这是浏览器主动尊重用户偏好，不是 bug。强行用 JS 模拟平滑滚动反而破坏体验，且无法还原原生惯性回弹
真正难搞的不是加一行 CSS，而是确保整个滚动上下文干净：没有 transform 截断、没有 overflow 隐藏、没有 shadow DOM 隔离、没有被重置样式悄悄覆盖。这些细节不排查完，scroll-behavior: smooth 就只是个摆设。
