启用平滑跳转需将 scroll-behavior: smooth 写在 html 元素上，确保 href 与 id 严格匹配、目标元素已渲染且未被固定头部遮挡，并配合 scroll-margin-top 补偿偏移。
直接加 html { scroll-behavior: smooth; } 就能启用平滑跳转，但 90% 的“不生效”不是 JS 没写对，而是 CSS 作用对象错了、id 匹配失败，或目标被固定头部遮住。
scroll-behavior 必须写在 html 上，不是 body
这个属性只对主滚动容器生效，而现代浏览器的主滚动容器是 html 元素，不是 body。写在 body 或通用选择器上基本无效。
- ✅ 正确写法：
html { scroll-behavior: smooth; }，放在全局样式最前面（如<style>块或 CSS 文件顶部） - ❌ 错误写法：
body { scroll-behavior: smooth; }、* { scroll-behavior: smooth; }、.main { scroll-behavior: smooth; }（除非它是局部滚动容器） - 检查是否生效：打开开发者工具 → 选中
html元素 → 在 computed 样式里确认scroll-behavior显示为smooth，且未被!important覆盖（某些 UI 框架会重置它） - 如果页面用了
overflow: hidden或height: 100vh等限制，可能导致html失去滚动能力，此时该属性自然失效
href 和 id 必须严格一致且合法
锚点跳转是原生行为，错一点就静默失败——不报错、不提示，只“不动”。
-
href必须带#，比如href="#contact"，不能是contact、/#contact或?id=contact -
id值不能以数字开头（如id="1section"在旧 Safari 可能解析失败），推荐用id="section-1" - 大小写、连字符、下划线必须完全一致：
href="#contact-us"对应<div id="contact-us">，不能是contactUs或contact_us -
id中不能含空格、中文、特殊符号（id="联系我们"或id="contact us"会被编码成%20，导致匹配中断） - 同一页面内
id必须唯一；重复时浏览器只滚动到第一个匹配元素 - 动态渲染内容（React/Vue）需确保目标元素已挂载完成再触发跳转，否则
document.getElementById()返回null
固定头部遮挡时用 scroll-margin-top 补偿
点击锚点后内容顶部被导航栏盖住，不是 JS 没算 offset，而是浏览器默认把目标元素“顶到视口最上方”，没留出空间。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐做法：给目标元素加
scroll-margin-top，例如#about { scroll-margin-top: 72px; }（值等于固定头部高度，含 border/padding） - ⚠️ 不要用
margin-top: -72px+padding-top: 72px模拟偏移——这破坏文档流，且影响 JS 获取offsetTop -
scroll-margin-top支持px、rem、vh单位，但仅在目标元素处于可滚动上下文内才生效 - iOS Safari 15.4 之前版本不支持该属性，若需兼容旧设备，得用 JS fallback（如
scrollIntoView({ behavior: 'smooth', block: 'start' })加手动 offset 计算）
JavaScript 手动触发时必须显式传 { behavior: 'smooth' }
scroll-behavior: smooth 对 window.scrollTo() 默认不生效，必须靠参数控制。
document.getElementById('faq').scrollIntoView({ behavior: 'smooth', block: 'start' });window.scrollTo({ top: 0, behavior: 'smooth' });- 旧写法
element.scrollIntoView(true)已废弃；true表示“自动”，但不控制是否平滑 - 若目标元素是
display: none或未渲染（如 Vue 的v-if条件未满足），调用会静默失败——务必确保元素已挂载且可见 - 用户快速连点多次会触发多个并发滚动，造成卡顿或错位，建议加节流（throttle）逻辑
真正容易被忽略的是滚动上下文的归属问题：你以为 body 在滚动，其实 html 才是根容器；你以为目标元素存在，其实它还在 React 的 useEffect 里等着挂载；你以为加了 scroll-margin-top 就万事大吉，结果 Safari 15.3 用户看到的还是被遮住的第一行字。
