必须将 scroll-behavior: smooth 写在 html 元素上才生效，因浏览器根滚动容器是 html；仅对原生锚点跳转和 scrollintoview() 有效，需配合 scroll-margin-top 解决固定头部遮挡，且 ios safari ≤15.4 不支持、系统“减少动画”偏好会静默禁用。
直接写 html { scroll-behavior: smooth; } 就能生效，但 90% 的“没反应”不是代码写错了，而是这行 CSS 根本没真正起作用，或者目标元素不满足滚动前提。
scroll-behavior 必须写在 html 上才有效
浏览器的根滚动容器是 html 元素，不是 body，也不是某个 div。写在其他地方基本无效——哪怕本地测试“好像动了”，也大概率是 JS 干预或偶然行为。
-
html { scroll-behavior: smooth; }是唯一推荐写法，不要加!important，也不要套在媒体查询或 CSS-in-JS 动态规则里 - 检查开发者工具「Computed」面板，确认
html的scroll-behavior值确实是smooth，而非被modern-normalize或 Ant Design 等框架悄悄重置为auto - 避免
* { scroll-behavior: auto !important; }这类全局重置，它会直接干掉你的设置
锚点跳转仍“瞬移”？先查这三处断点
scroll-behavior: smooth 不是魔法开关，它只在原生锚点跳转链路完整时才接管滚动。失效几乎从不因为 CSS 写错，而是目标找不到或算不准。
-
href和目标id必须严格一致：大小写、连字符、下划线都不能差，#contact-us对应id="contact-us"可以，#contact_us就不行 - 目标元素不能被隐藏：
display: none、visibility: hidden、父级overflow: hidden或transform都会让浏览器无法获取其位置 - 目标必须在默认文档流中：如果用了
position: absolute脱离布局，或被包在overflow: auto的局部滚动容器里，html上的声明就管不到它
固定导航栏遮住内容？用 scroll-margin-top，别手算偏移
浏览器默认把锚点元素顶部对齐视口顶部，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 不直接管 table
普通 <table> 默认不是滚动容器，<code>scroll-behavior 写在它上面不会生效。它只作用于实际发生滚动的容器。
- 必须把表格或其父容器设为独立滚动区：
max-height: 400px; overflow-y: auto; - 在该容器上启用行为：
.table-container { scroll-behavior: smooth; }（注意不是table标签本身） - 目标
<tr id="row-5"> 必须在该容器内、可见、且未脱离文档流；若行高受 <code>border-collapse影响，可微调：#row-5 { scroll-margin-top: 12px; }最容易被忽略的是：iOS Safari ≤15.4 不支持该属性，且系统「减少动画」偏好会静默禁用——这两者都不会报错，只会让你以为 CSS 失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
