scroll-behavior: smooth 必须写在 html 元素上，而非 body；配合 scroll-margin-top 补偿固定导航栏遮挡，并确保目标元素已渲染、ID 匹配且可见，才能实现可靠平滑滚动。
scroll-behavior: smooth 必须写在 html 上
90% 的“平滑滚动不生效”，问题就出在 scroll-behavior: smooth 写错了位置。它只对实际滚动容器生效，而页面级滚动容器是 html 元素，不是 body —— 写在 body 上完全被忽略，DevTools 里能看到样式但滚动仍是生硬的。
正确写法只有一行：html { scroll-behavior: smooth; }，建议放在全局 CSS 最前面，避免被 Ant Design、Bootstrap 等框架的 !important 覆盖。
- 检查方式：DevTools 中选中
html元素 → Computed → 确认scroll-behavior值为smooth且未被覆盖 - 若页面用了 Next.js 或某些 SSR 框架，可能插入了 wrapper
div，此时真实滚动根节点可能不是html，需用document.documentElement判断 - 系统启用了「减少动画」偏好（
@media (prefers-reduced-motion: reduce)）时，该属性会被浏览器强制禁用，属正常行为，无需报错
固定导航栏遮挡目标？用 scroll-margin-top 补偿
原生锚点跳转会把目标元素顶部对齐视口顶部，但 position: fixed 导航栏会盖住内容。这不是 JS 计算错了，而是滚动逻辑没预留视觉空间。
别用 padding-top 或负 margin-top 挤开目标元素——这破坏文档流、影响可访问性，响应式下极易失效。
立即学习“前端免费学习笔记（深入）”；
- 给目标元素加
scroll-margin-top: 64px（数值等于导航栏实际高度，含 border/padding） - 推荐选择器：
h2[id]、section[id]、[id^="section-"]，避免全局污染 - 单位支持
px、rem、vh，但不能用百分比 - 若目标元素父容器有
transform、overflow: hidden或will-change: transform，scroll-margin-top会被忽略，需排查 Computed 样式是否生效
动态渲染内容下锚点跳转失效或偏移
Vue/React 组件、AJAX 懒加载区块、IntersectionObserver 触发的内容插入，都会导致点击锚点时目标元素尚未挂载——document.getElementById("faq") 返回 null，跳转静默失败；或计算了旧 offsetTop，结果停在错误位置。
- 基础保障：确保跳转触发前，目标元素已存在于 DOM 中。Vue 用
mounted钩子不够，需等子内容渲染完成；React 用useEffect(() => {}, [])后再确认元素存在 - 接管跳转逻辑：阻止默认行为，改用
el.scrollIntoView({ behavior: 'smooth', block: 'start' })，比window.scrollTo更可靠 - 防重复触发：用户快速连点多次会引发并发滚动，需节流（如
setTimeout+ 标志位），否则可能卡顿或跳错 - 懒加载场景：若目标前有异步插入区块，需先触发加载，再等待
el.offsetParent !== null（表示已渲染且可见），再滚动
href 与 id 不匹配是静默失败主因
点击链接后无反应、URL hash 变了但页面不动，大概率是 href 和目标 id 没严格对齐——HTML ID 区分大小写，空格会被转成 %20，数字开头在部分老浏览器解析异常。
- 错误示例：
<a href="#about us">对应<div id="about us">→ 不滚动（空格 ≠ 连字符） - 正确写法：
<a href="#about-us">对应<div id="about-us"> - ID 不要以数字开头（如
id="1section"），推荐字母开头，如id="section1" - 目标元素不能是
display: none、visibility: hidden，也不能藏在overflow: hidden容器里，否则浏览器无法获取有效offsetTop
scroll-margin-top 失效、scrollIntoView 偏移、甚至 scroll-behavior 被静默绕过——这些边界情况往往只在特定设备或用户设置下才暴露。 
