scroll-behavior: smooth 必须写在 html 元素上才生效，写在 body 或全局选择器无效；锚点 id 需合法可见且严格匹配；fixed 导航栏遮挡时用 scroll-margin-top 修复；自定义滚动容器需单独设置该属性。

scroll-behavior: smooth 写对位置就能生效，不用 JS、不写插件——但写错地方（比如写在 body 上）或目标 id 不合规，就完全没反应。

scroll-behavior: smooth 必须作用于 html 元素

浏览器的主滚动上下文是 html 元素本身，不是 body。写在 body 上等于白写，DevTools 里看着“已应用”，实际滚动仍是生硬的。

• ✅ 正确写法：html { scroll-behavior: smooth; }
• ❌ 常见错误：body { scroll-behavior: smooth; }、* { scroll-behavior: smooth; }
• 某些 UI 框架（如 Ant Design）或重置样式会悄悄加 html, body { scroll-behavior: auto !important; }，得用 DevTools 的 Computed 面板确认最终是否生效
• 如果页面整体设了 height: 100vh; overflow: hidden;，html 实际不可滚动，该属性自然不触发

锚点目标必须有合法且可见的 id

原生锚点跳转只认 id 属性，且匹配严格：大小写、连字符、空格全算在内。JS 查询失败、跳转偏移或失效，八成出在这儿。

• id 值推荐仅含小写字母、短横线、下划线，且必须以字母开头（如 id="faq-section" ✅，id="1faq" ❌）
• href="#contact-us" 必须对应 <div id="contact-us">，不能是 <code>id="contact_us" 或 id="Contact-us"
• 目标元素不能是 display: none、visibility: hidden，也不能被包裹在 overflow: hidden 容器里
• 非可聚焦元素（如 <p></p>、<div>）建议加 <code>tabindex="-1"，确保浏览器能准确定位并滚动到

  fixed 导航栏遮挡内容？用 scroll-margin-top 修，别手算偏移

  跳转后目标元素顶部贴着视口顶边，但被 position: fixed 导航栏盖住——这是最常被忽略的视觉断层。手动 JS 计算 offsetTop 易出错且难维护。

  立即学习“前端免费学习笔记（深入）”；

  • ✅ 推荐方案：:target { scroll-margin-top: 60px; }（假设导航栏高 60px）
  • 该 CSS 规则兼容 Chrome 92+、Firefox 97+、Safari 15.4+，比 JS 更稳定、无竞态
  • 值支持 px、rem、vh，但不能用百分比
  • 若需兼容老 Safari（≤15.3），才考虑降级为 JS：el.scrollIntoView({ behavior: 'smooth', block: 'start' }) 并减去固定头高度

  自定义滚动容器（如聊天记录框）也要单独设 scroll-behavior

  如果页面某块区域自己可滚动（比如 overflow-y: auto 的 <div class="chat-history">），那么 <code>html 上的 scroll-behavior 对它完全无效。

  • 必须给该容器单独设置：.chat-history { height: 400px; overflow-y: auto; scroll-behavior: smooth; }
  • 前提是容器确实发生内容溢出，否则 scroll-behavior 不起作用
  • SPA 中路由切换后动态加载内容，若目标区块尚未挂载，scrollIntoView 会报 Cannot read property 'scrollIntoView' of null，务必先做存在性判断

  真正卡住人的从来不是代码多难写，而是 html 上漏写那行 CSS、id 多了个空格、或者以为 scroll-margin-top 能写在任意选择器上——这些细节一错，整个平滑滚动就静默失效。