scroll-behavior: smooth 必须写在 html 元素上，即 html { scroll-behavior: smooth; }，作用于根滚动容器才能使锚点跳转平滑；加在 body 或 div 上无效，且需确保目标元素可见、ID 严格匹配、无遮挡，并配合 scroll-margin-top 及 scrollIntoView({ behavior: 'smooth' }) 使用。
scroll-behavior: smooth 必须加在 html 元素上
不是 body，不是某个 div，更不是写成 class="scroll-smooth"——Tailwind 根本没有这个类，浏览器也完全不认。真正起效的只有一条原生 CSS 规则：html { scroll-behavior: smooth; }。它必须作用于根滚动容器（即 html），否则页面级锚点跳转（a[href="#section"]）不会平滑。
常见错误包括：
- 误加在
body上：旧版 Safari 和部分 Chrome 版本会静默忽略 - 加在局部容器（如
div.overflow-y-auto）上：只影响该容器内scrollIntoView()的行为，和锚点跳转无关 - 页面用了
height: 100vh; overflow: hidden等布局，导致html实际不可滚动，声明直接失效
目标元素必须可见且 ID 匹配严格
即使 scroll-behavior: smooth 已生效，90% 的“咔一下跳过去”问题出在 DOM 层面。href 和 id 必须逐字符一致：
-
href="#Contact"和id="contact"不匹配（大小写敏感） - 目标元素是
display: none、visibility: hidden或尚未挂载（如 React 中异步加载区块未渲染完成） - 固定定位导航栏遮挡目标顶部：用
scroll-margin-top: 72px给目标元素留白（值等于导航栏高度）
JavaScript 调用 scrollIntoView 时 behavior 必须显式传
哪怕你已设置 html { scroll-behavior: smooth; }，调用 scrollIntoView() 时仍需手动指定参数：
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法：
el.scrollIntoView()—— 默认是behavior: 'auto' - ✅ 正确写法：
el.scrollIntoView({ behavior: 'smooth', block: 'start' }) - 若需兼容 Safari 15.4 以下版本，不能依赖 CSS 声明，得自己实现基于
window.scrollTo的动画逻辑
检查是否生效的最快方式
别猜，直接看 DevTools：
- 选中
html元素 → 切到 Computed 面板 → 搜索scroll-behavior，确认值为smooth，且未被!important覆盖（某些 UI 库重置样式会写html, body { scroll-behavior: auto !important; }） - 点击锚点链接后，观察地址栏 hash 是否变化、目标是否滚动到位——如果 hash 变了但没动，说明目标不可见或被隐藏；如果 hash 没变，说明 href/id 根本没对上
最易被忽略的是 scroll-margin-top 和 Safari 兼容性：前者不设就卡在导航栏下面，后者不查版本就以为功能坏了。
