scroll-behavior: smooth 必须写在 html 元素上而非 body，否则无效；固定导航栏需用 scroll-margin-top 补偿；锚点跳转要求 href 与 id 严格匹配且 id 合法。
scroll-behavior: smooth 必须写在 html 上，不是 body
90% 的“平滑滚动不生效”问题，根源就在这行 CSS 写错位置。浏览器只认 html 元素为页面级滚动容器，body 上声明的 scroll-behavior: smooth 完全被忽略——DevTools 里能看到样式，但滚动仍是生硬的。
正确写法只有一行：html { scroll-behavior: smooth; }，且建议放在全局 CSS 最前面，避免被 reset 或框架样式（如 Ant Design 的 !important）覆盖。
- 检查方式：在 DevTools 中选中
html元素 → 查看 Computed 样式 → 确认scroll-behavior值为smooth且未被覆盖 - 局部滚动容器（如
<div class="chat-log" style="overflow: auto">）需单独加 <code>scroll-behavior: smooth，且必须带overflow属性 - 系统启用了“减少动画”偏好（
@media (prefers-reduced-motion: reduce)）时，该属性会被浏览器强制禁用，属正常行为 - 正确做法：给目标元素加
scroll-margin-top: 64px（数值等于导航栏实际高度，含 border/padding） - 推荐选择器：
h2[id], section[id], [id^="section-"]，避免全局污染 - 单位支持
px、rem、vh，但不能用百分比 - 兼容性：Chrome 92+、Firefox 97+、Safari 15.4+；旧版 Safari 可降级用
scroll-padding-top设在html上 - 基础保障：确保跳转触发前，目标元素已存在于 DOM 中。Vue 用
mounted、React 用useEffect(() => {}, []) - 接管跳转逻辑：阻止默认行为，改用
el.scrollIntoView({ behavior: 'smooth', block: 'start' })，比window.scrollTo更可靠 - 防重复触发：用户快速连点多次会引发并发滚动，需节流（如
setTimeout+ 标志位） - 懒加载场景：若目标前有异步插入区块，需先触发加载完成事件，再执行滚动，否则高度突变导致偏移
-
href必须是#section-1格式，不能是section-1、/#section-1或?id=section-1 -
id不能以数字开头（如id="1section"在旧版 Safari 中可能失联），推荐id="section-1" -
id中不能含空格、中文、特殊符号（id="联系我们"或id="contact us"都会中断） - 同一页面内
id必须唯一；重复时只滚动到第一个匹配元素 - 目标元素不能是
display: none、visibility: hidden，也不能被父容器overflow: hidden截断滚动上下文
固定导航栏遮挡目标元素，用 scroll-margin-top 补偿
原生锚点跳转会把目标元素顶部对齐视口顶部，但 position: fixed 导航栏会盖住内容。这不是 JS 计算错了，是滚动逻辑没预留视觉空间。
别用 padding-top 或负 margin-top 挤开目标元素——这破坏布局流、影响可访问性，且响应式下极易失效。
立即学习“前端免费学习笔记（深入）”；
动态渲染内容下锚点跳转失效或偏移，要等 DOM 就绪再滚动
Vue/React 组件、AJAX 懒加载区块、或 IntersectionObserver 触发的内容插入，都会导致点击锚点时目标元素尚未挂载——document.getElementById("faq") 返回 null，跳转静默失败；或计算了旧 offsetTop，结果停在错误位置。
href 和 id 匹配失败的常见陷阱
锚点跳转是纯 DOM 查找行为，不报错也不警告，错一点就静默失效。最常踩的坑不在 JS，而在 HTML 和命名规则。
html 上、锚点用 id 不用 name、固定头用 scroll-margin-top 补齐——其余都是干扰项。动态内容和命名合法性，才是日常踩坑最密集的地方。
