scroll-behavior: smooth 必须写在 html 元素上才生效，写在 body 上完全无效；需确保样式未被覆盖、目标元素可见且 id 与 href 严格匹配，并注意 ios safari 兼容性及系统“减少动画”设置影响。
scroll-behavior: smooth 必须写在 html 上才生效
写在 body 上完全无效，哪怕本地测试“好像动了”，那也是浏览器偶然行为或 JS 干预导致的假象。浏览器滚动根容器是 html 元素，CSS 规范明确要求该属性只对实际滚动容器生效。
正确做法是直接在全局样式中写：
html { scroll-behavior: smooth; }不要加 !important，也不要套在媒体查询或嵌套规则里——它需要被计算为最终生效样式。容易踩的坑：
-
* { scroll-behavior: auto !important; }这类通配符重置会直接覆盖你的设置 - 某些 UI 框架（如 Ant Design）或重置库（如 modern-normalize）悄悄写了
html, body { scroll-behavior: auto; }，得用开发者工具检查 computed 样式确认是否被覆盖 - 页面用了
height: 100vh+overflow: hidden，可能导致html实际不可滚动，属性自然不触发
锚点跳转后还是“瞬移”？先查这三件事
即使 CSS 写对了，scroll-behavior: smooth 也只在满足条件时才触发。常见静默失效原因不是代码错，而是链路断了。
务必检查：
-
href值和目标元素的id必须严格一致：大小写、连字符、下划线都不能错，href="#contact-us"对应id="contact-us"可以，但href="#contact_us"就不行 - 目标元素不能被隐藏：
display: none、visibility: hidden、父级overflow: hidden或transform都会让浏览器无法计算其位置 - 目标必须在默认文档流中：如果用了
position: absolute脱离布局，或被包裹在overflow: auto的局部滚动容器里，那html上的scroll-behavior就管不到它
固定头部遮挡锚点？用 scroll-margin-top，别算 offsetTop
浏览器默认把目标元素顶部对齐视口顶部，会被 position: fixed 或 sticky 导航栏遮住。最稳定的方式是用 CSS 解决，而不是 JS 动态计算偏移量。
给目标元素加：
h2[id] { scroll-margin-top: 60px; }数值按导航栏实际高度调整。更健壮的做法是响应式适配：scroll-margin-top: clamp(50px, 8vh, 80px);
注意：
- 不要给
html或body加scroll-padding-top——它控制的是整个视口的滚动内边距，和锚点定位无关 - 避免混用
scrollIntoView({ block: 'center' })，它和scroll-behavior是两套机制，容易冲突 - 如果必须用 JS 触发（比如 SPA 路由 hash 变化），要显式传参：
el.scrollIntoView({ behavior: 'smooth', block: 'start' })，不传behavior就是瞬移
iOS Safari 和系统动画开关是绕不开的兼容性坑
scroll-behavior: smooth 在 iOS Safari ≤15.3 完全不支持，15.4+ 才稳定；旧版本只会静默降级，不报错也不动画。用户开启系统“减少动画”（prefers-reduced-motion: reduce），Chrome/Firefox/Safari 都会强制禁用所有 smooth 行为。
安全写法是用 @supports 降级：
@supports (scroll-behavior: smooth) { html { scroll-behavior: smooth; } }
不要 fallback 到 JS 滚动库来“补兼容”——它的行为和 CSS 方案不一致：前者触发 scroll 事件，后者不触发；且移动端回弹、惯性表现不同。真正复杂的需求（比如自定义缓动曲线、滚动完成回调）才值得上 JS。
最容易被忽略的一点：这个属性只控制“谁来滚”，而 JS 的 behavior 参数决定“怎么滚”，两者职责分明，不能互相替代；一端漏了，效果就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
