scroll-behavior: smooth 必须写在 html 元素上才生效，即 html { scroll-behavior: smooth; }；锚点 href 与 id 必须严格一致且合法；固定头部遮挡应使用 scroll-margin-top；js 滚动需显式指定 behavior: 'smooth' 并判空；系统启用“减少动画”时需降级为 auto。
scroll-behavior: smooth 必须写在 html 元素上
直接生效的写法只有一种：html { scroll-behavior: smooth; }。写在 body、* 或任意 class 上都不起作用——因为浏览器主滚动容器是 html，不是视觉上“动”的那个元素。
常见错误：
-
body { scroll-behavior: smooth; }→ 无效，即使开发者工具里看到 body 有滚动条 - 某些 UI 框架（如 Ant Design）会加
scroll-behavior: auto !important到html，必须用更高优先级覆盖 - 放在
<style></style>块末尾，被其他 CSS 规则覆盖
验证是否生效：打开开发者工具 → 选中 html 元素 → 查看 Computed 样式中 scroll-behavior 是否为 smooth，且无 !important 冲突。
href="#id" 和 id 必须严格字符一致
锚点跳转不报错也不提示，错一个字符就静默失败。重点检查：
-
href必须是#section-1格式，不能是section-1、/#section-1或?id=section-1 -
id值不能含空格、中文、特殊符号（如id="联系我们"或id="contact us"） - ID 区分大小写：
href="#About"对应id="About"，不是id="about" - 避免数字开头：
id="1-section"在旧版 Safari 可能解析失败，改用id="section-1" - 确保目标元素已挂载：React/Vue 动态渲染时，点击瞬间
document.getElementById('xxx')返回null就不会滚动
固定头部遮挡时用 scroll-margin-top，别算 offset
默认滚动把目标元素顶部贴到视口顶部，但 position: fixed 导航栏会盖住内容。手动在 JS 里减去 header 高度极易出错，尤其响应式场景下。
正确做法是给目标元素加 CSS：
h2[id], .section { scroll-margin-top: 64px; }
其中 64px 应等于固定头部的实际高度（含 border/padding）。注意：
- 该属性只对处于可滚动上下文内的目标生效（不在 iframe 或 Shadow DOM 里）
- 不要写成
margin-top或padding-top，它们影响布局流，不是滚动锚点偏移 - 若想让目标垂直居中，可用
scrollIntoView({ block: 'center' })，但scroll-margin-top更稳定
JavaScript 手动触发时 behavior 参数不能省
scrollIntoView() 和 window.scrollTo() 默认不平滑，必须显式传对象参数：
-
el.scrollIntoView({ behavior: 'smooth' });—— 旧写法el.scrollIntoView(true)已废弃 -
window.scrollTo({ top: 100, behavior: 'smooth' });—— 传数字如window.scrollTo(100)不支持平滑 - 动态触发前务必判空：
if (el) el.scrollIntoView(...)，否则控制台报Cannot read property 'scrollIntoView' of null - 快速连点需节流，否则并发滚动导致卡顿或定位偏移
最易忽略的是：系统级「减少动画」偏好开启时（@media (prefers-reduced-motion: reduce)），scroll-behavior: smooth 会被浏览器强制禁用，此时 JS 方案也得 fallback 到 behavior: 'auto'。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
