scroll-behavior: smooth 最常见失效原因是未正确作用于滚动容器，应设在 html 上而非 body；与 sticky 导航栏冲突时需用 scroll-margin-top 为锚点元素留白；safari 15.4+ 才支持 smooth，15.0–15.3 及所有 ie 不支持。
scroll-behavior: smooth 为什么加了没反应
最常见原因是没加在正确容器上——scroll-behavior 必须作用于滚动容器，通常是 html 或 body，但浏览器对 body 的支持不一致，直接写在 html 上才最稳。
- ✅ 正确写法：
html { scroll-behavior: smooth; } - ❌ 常见错误：只写
body { scroll-behavior: smooth; }，在 Safari 和部分旧版 Chrome 中无效 - ⚠️ 注意：该属性不继承，父容器设了，子
div滚动仍不平滑，需单独设置 - ⚠️ 如果页面用了
overflow: hidden或强制height: 100vh等布局，可能让html失去滚动能力，导致属性失效
锚点跳转时页面闪一下或偏移不准
这是 scroll-behavior: smooth 和固定头部（如 sticky navbar）冲突的典型表现：滚动目标是元素顶部，但导航栏遮挡了它。
- 解决方法不是 JS 计算偏移，而是用 CSS 的
scroll-margin-top给目标元素“留白”：h2[id] { scroll-margin-top: 60px; } - 值建议用和导航栏高度一致的像素值，或用
clamp()适配响应式：scroll-margin-top: clamp(50px, 8vh, 80px);
- ⚠️ 不要给
html或body加scroll-padding-top——它控制的是整个视口的滚动内边距，和锚点定位无关，容易误用
兼容性差？哪些浏览器根本不用试
scroll-behavior 在现代浏览器中已稳定，但仍有明确断层：
- ✅ 支持：Chrome 61+、Firefox 36+、Edge 79+、Safari 15.4+（注意：Safari 15.0–15.3 不支持
smooth） - ❌ 不支持：所有 IE 版本、iOS Safari
- ? 实用策略：用
@supports安全降级，避免影响基础跳转@supports (scroll-behavior: smooth) { html { scroll-behavior: smooth; } } - ⚠️ 不要 fallback 到 JS 滚动库（如
scrollIntoView({ behavior: 'smooth' })）来“补兼容”，因为它的行为和 CSS 方案不一致：前者触发scroll事件，后者不触发；且移动端回弹、惯性表现不同
点击链接后没滚动？检查 href 是否合法
再平滑的 CSS 也救不了一个坏锚点。常见失效链路：a 标签 href 写错 → 浏览器不触发滚动 → 平滑属性完全无机会生效。
- ✅ 正确：
href="#section-2"对应页面内存在<h2 id="section-2"></h2>或<div id="section-2"> <li>❌ 错误：<code>href=".section-2"（类选择器）、href="section-2"（缺#）、href="#Section-2"（大小写不匹配） - ⚠️ 特别注意：Vue/React 等框架中，如果用
router-link或自定义点击事件阻止了默认行为，scroll-behavior就彻底失效——它只对原生锚点跳转起作用 - ? 调试技巧：临时删掉
scroll-behavior，看是否能跳转；不能，则先修href和id
平滑滚动看着简单，实际卡点全在 CSS 作用域、锚点合法性、以及和固定导航的像素级对齐上。最容易被忽略的是 Safari 版本号和
scroll-margin-top 的组合——写了 smooth 却没加留白，用户永远觉得“差点意思”。
