scroll-behavior: smooth 必须写在 html 元素上才生效，body 或其他元素无效；需确保 href 与 id 严格一致、目标元素可见且在文档流中，并配合 scroll-margin-top 解决固定导航遮挡问题。
scroll-behavior: smooth 必须写在 html 上才生效
写在 body 或任何其他元素上都无效，这不是兼容性问题，而是浏览器规范决定的——页面级滚动容器是 html 元素，不是 body。哪怕本地测试“好像动了”，也大概率是 JS 干预或浏览器偶然行为。
正确写法只有一行，且必须独立、无覆盖：
html { scroll-behavior: smooth; }
- 不要加
!important，也不要用媒体查询包裹 - 避免被通配符重置干掉，比如
* { scroll-behavior: auto !important; } - 某些 UI 框架（Ant Design、Chakra UI）或重置库（modern-normalize）会悄悄写
html, body { scroll-behavior: auto !important; }，务必用开发者工具检查html的 computed 样式确认值是否为smooth
锚点跳转仍“瞬移”？先查这三件事
scroll-behavior: smooth 不是万能开关，它只在满足前提时才触发平滑行为。静默失效往往不是 CSS 写错了，而是链路断了。
-
href和目标元素的id必须严格一致：大小写、连字符、下划线都不能错，href="#faq"不匹配id="FAQ" - 目标元素不能被隐藏：
display: none、visibility: hidden、父级overflow: hidden或transform都会让浏览器无法计算其位置 - 目标必须在默认文档流中：用了
position: absolute、position: fixed，或被包在overflow: auto的局部滚动容器里，html上的scroll-behavior就管不到它
固定导航栏遮挡内容？用 scroll-margin-top，别算 offsetTop
浏览器默认把锚点元素顶部对齐视口顶部，position: fixed 或 sticky 导航栏会直接盖住内容。这不是滚动不准，是定位逻辑本身没考虑头部高度。
给目标元素加 scroll-margin-top，例如：
h2[id] { scroll-margin-top: 60px; }
- 数值建议与导航栏实际高度一致；响应式场景可用
scroll-margin-top: clamp(50px, 8vh, 80px); - 不要给
html或body加scroll-padding-top——它控制的是整个视口内边距，和锚点定位无关 - 这个属性和
scroll-behavior是搭档关系，缺一不可
JS 手动滚动仍要显式传 { behavior: 'smooth' }
scroll-behavior: smooth 只影响原生锚点跳转和 element.scrollIntoView() 的默认行为，对 window.scrollTo()、element.scrollTop 等手动调用完全无效。
- 如果用
scrollIntoView，必须显式传参：el.scrollIntoView({ behavior: 'smooth', block: 'start' }); - 不传
behavior就是瞬移，CSS 设置不会兜底 - Safari ≤15.3 不支持
html上的scroll-behavior: smooth，但支持scrollIntoView({ behavior: 'smooth' })，可作为降级依据
真正卡住的点往往不在代码本身，而在目标元素是否“可被浏览器看见并准确定位”——DOM 存在、样式未遮挡、布局未脱离文档流，这三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
