scroll-behavior必须写在html元素上才生效，正确写法为html { scroll-behavior: smooth; }，写在body或通配符上无效；仅对原生锚点链接生效，id需规范、目标元素需可见且无遮挡；局部滚动容器需单独设置该属性。
scroll-behavior必须写在html元素上才生效
加了scroll-behavior: smooth却没反应？90% 是因为写在了 body 上。浏览器真正的根滚动容器是 html 元素，不是 body ——哪怕你看到滚动条在 body 上，底层滚动上下文仍绑定在 html。
正确写法只有一行：html { scroll-behavior: smooth; }
- 别写
body { scroll-behavior: smooth; }，Safari 尤其会直接忽略 - 别用通配符
* { scroll-behavior: smooth; }，优先级低且易被覆盖 - 检查 DevTools 的 Computed 面板，确认
html元素的scroll-behavior值确实是smooth，而不是被第三方样式（如 Ant Design、Normalize.css）用!important覆盖为auto - 某些微前端或 CMS 框架会插入包裹容器，此时
document.documentElement可能不是真实根节点，需用document.querySelector('html')确认
锚点跳转失效的常见原因和验证点
scroll-behavior: smooth 只对原生锚点链接（a[href="#xxx"] → element[id="xxx"]）生效，且匹配极其严格。
-
id必须以字母开头，只含小写字母、数字、短横线、下划线（如id="faq-section"✅，id="1faq"❌） -
href="#contact-us"必须精确对应<div id="contact-us">，大小写、连字符、空格全算错<li>目标元素不能是 <code>display: none或visibility: hidden；也不能被父级overflow: hidden或transform截断滚动上下文 - 动态渲染场景（React/Vue）中，确保
id在组件挂载后真实存在于 DOM，否则点击会静默失败或跳到页面顶部 - 不支持
name属性，也不穿透 Shadow DOM —— 若用 Web Components，需在 shadow root 内单独设scroll-behavior - 给目标元素加
h2[id] { scroll-margin-top: 60px; }（值等于导航栏高度） - 响应式场景可用
clamp(50px, 8vh, 80px)，避免小屏下留白过大 -
scroll-margin-top只对锚点跳转和scrollIntoView()生效，对scrollTo()无效 - 别用
scroll-padding-top—— 它作用于整个视口，和锚点定位无关，加了反而容易错位 - 若导航栏高度不固定（如折叠菜单），优先用
scrollIntoView({ block: 'start', behavior: 'smooth' })配合padding-top补偿，而非 JS 动态改scroll-margin-top - 容器需同时满足：有固定高度/最大高度 +
overflow-y: auto（或scroll）+ 内容实际溢出 - 示例：
.chat-history { height: 400px; overflow-y: auto; scroll-behavior: smooth; } - 不要只加
scroll-behavior: smooth就指望它可滚动 —— 没溢出，该属性无意义 - 局部容器内锚点跳转（如
<a href="#msg-123"></a>）也依赖这个设置，且同样要求id精确匹配、元素可见 - 移动端 WebView（如微信内置浏览器）对局部
scroll-behavior支持更不稳定，实测易回退为瞬时滚动，建议关键路径加 JS fallback
固定导航栏遮挡目标内容？用scroll-margin-top，别手算
锚点跳转后目标元素顶部被 position: fixed 导航栏盖住，不是滚动错了，而是浏览器默认把目标顶部对齐视口顶部。手动 JS 计算 offset 容易出错、难维护，还破坏滚动惯性。
局部滚动容器也要单独设scroll-behavior
如果页面里有自定义滚动区域（比如聊天记录框、侧边菜单），html 上的 scroll-behavior 对它完全无效。必须显式作用于该容器本身。
真正容易被忽略的是：平滑滚动会阻塞后续同步脚本执行。比如表单校验后调用 scrollIntoView({ behavior: 'smooth' })，紧接着读取 getBoundingClientRect()，很可能拿到的是滚动前的位置。得监听 scrollend 事件，或用 setTimeout(() => {}, 0) 延迟读取。
