scroll-behavior: smooth 必须作用于 html 元素才生效，因浏览器主滚动上下文是 html；需避开框架重置、隐藏遮挡、vh 布局等常见失效场景，并用 @supports 适配 Safari ≤15.3 不支持问题。
scroll-behavior: smooth 必须写在 html 上才生效
写在 body 或 * 上基本等于没写。浏览器的主滚动上下文是 html 元素本身，scroll-behavior 只有作用于这个根容器时，才能接管所有原生锚点跳转（比如点击 ）。
常见错误包括：
- 第三方 UI 框架重置样式里有
html, body { scroll-behavior: auto !important; }，直接覆盖你的设置 - 目标元素被
display: none、visibility: hidden或父级overflow: hidden遮挡，浏览器算不出位置 - 用了
height: 100vh+overflow: hidden布局，导致html实际不可滚动
验证是否生效：打开开发者工具，选中 html 元素，在 computed 样式里搜 scroll-behavior，确认值为 smooth 且无 !important 覆盖。
固定导航栏遮挡目标顶部？用 scroll-margin-top 而不是 JS 算偏移
加了 scroll-behavior: smooth 后，点击锚点还是被顶部 position: fixed 导航栏盖住——这不是 JS 该管的事，是 CSS 的职责。
正确做法是给目标元素（比如 ）加留白：
h2[id] {
scroll-margin-top: 60px;
}
更稳妥的写法用 clamp() 适配不同屏幕：
section[id] {
scroll-margin-top: clamp(50px, 8vh, 80px);
}
别碰 scroll-padding-top：它作用于整个视口，和锚点定位无关，加了反而容易错位。
为什么 Safari 里没反应？兼容性断层很明确
scroll-behavior: smooth 在 Safari ≤15.3 完全不支持；15.4 开始才稳定支持。Chrome 61+、Firefox 36+、Edge 79+ 都没问题，但 IE 全系不支持。
安全写法是用 @supports 包裹：
@supports (scroll-behavior: smooth) {
html {
scroll-behavior: smooth;
}
}
不要 fallback 到 element.scrollIntoView({ behavior: 'smooth' }) 来“补兼容”：它的滚动曲线、事件触发时机、移动端回弹表现都和 CSS 方案不一致，混用反而导致体验割裂。
动态加载内容后锚点跳转偏移？CSS 无法自动感知 DOM 变化
scroll-behavior: smooth 是纯声明式行为，只对当前 DOM 快照起作用。如果目标元素是 AJAX 插入、Vue 异步组件或 IntersectionObserver 懒加载出来的，浏览器按旧 offsetTop 滚动，结果就停在空白处。
这时必须切到 JS 方案，并做三件事：
- 拦截默认跳转：
e.preventDefault() - 确保元素已渲染：
if (!el) return requestAnimationFrame(() => scrollToTarget(id)) - 等模块加载完成后再滚动：监听自定义事件（如
'section-features-loaded'）或 Promise resolve
注意：不能依赖 DOMContentLoaded 或 load，它们不保证动态内容已挂载。
实际项目里最常卡住的地方，不是不会写 scroll-behavior: smooth，而是没意识到它只管“静态锚点”——一旦页面结构或元素可见性随交互变化，就得主动交棒给 JS，而且交接时机稍有偏差，滚动就错位。
