必须写在html上，因浏览器根滚动容器是html而非body；写在body上Safari等会忽略，且需检查Computed中html的scroll-behavior值是否为smooth、未被覆盖，目标元素须可见且id严格匹配。
直接写 html { scroll-behavior: smooth; } 就能生效，但 90% 的“没反应”是因为写错了容器、目标不可见，或被 CSS 覆盖了。
为什么必须写在 html 上，而不是 body
浏览器真正的滚动容器是 html 元素，不是 body。Safari 和旧版 Chrome 会直接忽略 body { scroll-behavior: smooth; }，导致完全不生效。你在开发者工具的 Computed 面板里检查 html 元素，确认它的 scroll-behavior 值确实是 smooth，而不是被重置为 auto。
常见干扰项包括：
- 第三方 UI 库或 Normalize.css 里写了
html, body { scroll-behavior: auto !important; } -
html被overflow: hidden或height: 100vh锁死，它就不再是滚动容器 - 用了自定义滚动容器（如
.content { overflow-y: auto; }），那得单独给它加scroll-behavior: smooth
scroll-behavior: smooth 到底能管哪些操作
它只对两类行为生效：
立即学习“前端免费学习笔记（深入）”；
- 用户点击锚点链接（
<a href="#faq">跳转</a>） - JS 调用
element.scrollIntoView()且未传{ behavior: 'smooth' }参数时的默认行为
以下操作完全不受影响，必须手动加参数：
-
element.scrollTop = 100—— 硬跳 -
window.scrollTo(0, 200)—— 硬跳 -
router.push('/about#contact')（Vue/React 路由）—— 不触发原生锚点逻辑
想用 JS 平滑滚动，必须显式写：element.scrollIntoView({ behavior: 'smooth' }) 或 element.scrollTo({ top: 100, behavior: 'smooth' })。
锚点内容被固定导航栏遮住怎么办
这不是 JS 计算 offset 的问题，而是 CSS 定位逻辑缺失。别在 JS 里手动减去导航栏高度，会破坏滚动惯性、回弹和 scroll 事件时机。
正确做法是给目标元素加 scroll-margin-top：
-
h2[id] { scroll-margin-top: 60px; }（值等于导航栏高度） - 响应式场景可用
scroll-margin-top: clamp(50px, 8vh, 80px); - 这个样式必须加在目标元素自身上（比如
h2、section），加在html或body上无效
注意：scroll-padding-top 是作用于整个滚动视口的内边距，和锚点定位无关，别混淆。
移动端和 Safari 兼容性要注意什么
iOS Safari ≤15.4 对 html { scroll-behavior: smooth; } 支持不稳定，部分机型首次加载带 hash（如 page.html#contact）时可能硬跳一次。这不是 bug，是渲染时序问题：CSS 还没就绪，浏览器已执行跳转。
降级方案建议：
- 监听
hashchange事件，用setTimeout延迟调用document.getElementById(hash).scrollIntoView({ behavior: 'smooth' }) - 检查系统偏好：
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }，避免违背用户设置 - Shadow DOM 场景下，
scroll-behavior不穿透影子边界，需在 shadow root 内单独设置
最易被忽略的一点：目标元素必须已挂载、可见、ID 大小写完全匹配，且不能被 display: none 或父级 overflow: hidden 遮挡——这些 DOM 层面的问题，比 CSS 写错更难排查。
