html { scroll-behavior: smooth; } 必须写在 html 元素上才生效，body 或其他选择器无效；需确保目标元素 id 与 href 严格一致、未被隐藏或脱离文档流，并配合 scroll-margin-top 解决导航栏遮挡；ios safari 和系统“减少动画”设置可能导致静默失效。
直接加 html { scroll-behavior: smooth; } 就能生效，但绝大多数“没反应”问题，都卡在这行 CSS 没真正起作用，或者目标元素不满足滚动前提。
scroll-behavior 必须写在 html 上，写在 body 或其他地方无效
浏览器的根滚动容器是 html 元素，不是 body。哪怕你在 body 上写了 scroll-behavior: smooth;，它也完全不会触发页面级锚点平滑滚动——这不是兼容性问题，而是规范定义如此。
- ✅ 正确写法只有一行：
html { scroll-behavior: smooth; } - ❌
body { scroll-behavior: smooth; }、* { scroll-behavior: smooth; }、.container { scroll-behavior: smooth; }都无效（除非那个容器本身是独立滚动区） - 检查是否被覆盖：用开发者工具看
html元素的 computed 样式，确认scroll-behavior确实是smooth，且没被!important的auto覆盖（比如某些 UI 库或重置样式表会偷偷加html, body { scroll-behavior: auto !important; }）
锚点跳转后还是“啪”一下跳过去？先查这三件事
scroll-behavior: smooth 只对原生锚点跳转生效，但它不保证一定能滚到——前提是目标元素必须可被浏览器定位。
-
href="#about"和目标元素的id必须严格一致：大小写、连字符、下划线都不能错；#FAQ不会匹配id="faq" - 目标元素不能被隐藏：
display: none、visibility: hidden、父级overflow: hidden或transform都会让浏览器无法计算其位置 - 目标必须在默认文档流中：如果用了
position: absolute脱离布局，或被包在overflow: auto的局部滚动容器里，html上的scroll-behavior就管不到它
滚动到位后内容被固定导航栏遮住？用 scroll-margin-top，别手动算偏移
浏览器默认把锚点元素顶部对齐视口顶部，position: fixed 导航栏会直接盖住内容。这不是滚动不准，是定位逻辑本身没考虑头部高度。
- 给目标元素加
scroll-margin-top，比如：h2[id] { scroll-margin-top: 60px; } - 值建议与导航栏实际高度一致；响应式场景可用
clamp(50px, 8vh, 80px) - 不要给
html或body加scroll-padding-top——它控制的是整个视口内边距，和锚点定位无关 - 这个属性和
scroll-behavior是搭档关系，缺一不可
iOS Safari 和系统“减少动画”设置会让 scroll-behavior 静默失效
它不报错、不警告，只是退化成瞬时滚动——这是最隐蔽的问题来源。
- iOS Safari ≤15.4 完全不支持；15.4–16.0 支持但常卡顿、跳帧甚至静默失败；iOS 16+ 对
html上的声明基本忽略，仅对element.scrollIntoView({ behavior: 'smooth' })有效 - 用户开启系统级「减少动画」偏好（
prefers-reduced-motion: reduce）时，浏览器会静默禁用所有scroll-behavior: smooth - 单页应用中路由变化（如 Vue Router / React Router）不会触发该属性，必须手动调用
scrollIntoView({ behavior: 'smooth' })
真正麻烦的不是写那行 CSS，而是验证它是否在运行时生效、目标是否真的可定位、以及移动端是否悄悄绕过了你——这些环节任何一个断掉，都会让平滑滚动彻底消失，而且毫无提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
