scroll-behavior: smooth 必须写在 html 元素上才生效，即 html { scroll-behavior: smooth; }；锚点跳转需确保 href 合法且目标 id 存在、唯一、无非法字符；JS 调用 scrollIntoView 需显式传入 { behavior: 'smooth' }；fixed 头部遮挡可用 scroll-margin-top 修复。
scroll-behavior: smooth 用在哪个位置才生效
必须加在 html 元素上，不是 body，也不是某个 div。浏览器只认根元素的这个声明，body 上设了也没用。
实操写法只有这一种有效：
html {
scroll-behavior: smooth;
}
如果你用的是 CSS-in-JS 或框架（如 Vue/React 的 scoped style），注意确保该样式作用在真实的 html 标签上，而不是被包裹或隔离了。
锚点跳转时 href 必须是合法 ID 且页面存在
平滑滚动不会修复跳转失败的问题。如果点击后没反应，先检查：
立即学习“前端免费学习笔记（深入）”；
-
href值是否以#开头，比如<a href="#contact">联系我</a> - 目标元素是否有对应
id，比如<section id="contact"></section> - ID 不能含空格、中文、特殊符号（如
id="我的区块"或id="contact section"都会失效） - 不要重复使用同一个 ID —— 浏览器只滚动到第一个匹配项
JavaScript 调用 scrollIntoView 时怎么启用平滑
纯 CSS 的 scroll-behavior 不影响 JS 滚动行为。想用 JS 触发平滑滚动，必须显式传参：
document.getElementById('about').scrollIntoView({
behavior: 'smooth',
block: 'start'
});
常见遗漏点：
- 漏写
behavior: 'smooth'—— 默认是'auto'，就是瞬间跳 - 在元素还没挂载到 DOM 时就调用（比如 Vue 的
mounted阶段还没渲染完，或 React 的useEffect里没加 ref 判断） -
block和inline值会影响对齐方式，block: 'center'可能让目标居中，但可能遮挡固定头部，需配合scroll-margin-top
fixed 头部遮挡内容？用 scroll-margin-top 补救
启用平滑滚动后，点击锚点常发现目标内容被 position: fixed 的导航栏盖住。这不是滚动问题，而是定位偏差。
解决方法是在目标元素上加偏移：
#contact {
scroll-margin-top: 80px;
}
这个值一般等于你的 fixed 头部高度。注意：scroll-margin-top 是 CSS 属性，只对通过滚动定位（包括 scrollIntoView 和锚点跳转）生效，不影响普通布局。
兼容性提示：Chrome 69+、Firefox 68+、Edge 79+ 支持；Safari 15.4+ 才支持 scroll-margin-top，旧版 Safari 只能靠 JS 临时调整 window.scrollY 补偿。
真正容易被忽略的是：CSS 平滑滚动和 JS 平滑滚动是两套机制，一个开了不等于另一个自动生效；而 fixed 头部遮挡问题，在开发时往往要等真机预览才暴露出来。
