scroll-behavior: smooth 必须写在 html 元素上才生效，写在 body 或 div 上无效；需确保 href 与 id 严格匹配、目标元素可见且在文档流中，并配合 scroll-margin-top 避开固定头部，同时注意 ios safari 兼容性及系统“减少动画”设置影响。
直接用 scroll-behavior: smooth 配合语义化锚点就能实现，但多数人卡在写错位置、目标不可见或滚动上下文被截断上——不是功能不存在，而是条件没凑齐。
html { scroll-behavior: smooth } 必须写在 html 上
浏览器的根滚动容器是 html 元素，不是 body。写在 body 上完全无效，DevTools 里看到样式生效也不代表实际起作用。
- 正确写法只有一行：
html { scroll-behavior: smooth; } - 别同时加在
html和body上，旧版 Chrome 可能降级为auto - 如果用了 CSS 重置（比如
* { margin: 0; }），检查是否意外改了html的height或overflow - 微前端或 CMS 框架可能包裹额外 DOM，可用
document.documentElement确认根节点是否仍是html
scrollIntoView({ behavior: 'smooth' }) 调用前必须验证三件事
动态渲染场景下（如 Vue 的 v-if、React 的条件渲染），getElementById 返回 null 或元素不可见时，调用会静默失败，控制台不报错但滚动不动。
-
元素是否存在且可见：用
if (!el || !el.offsetParent)判断，offsetParent === null表示被隐藏、未挂载或display: none -
滚动上下文是否正确：如果目标在
overflow: hidden的父容器里，scrollIntoView仍会尝试滚动document，而非你预期的容器 -
系统是否禁用动效：macOS / Windows 开启「减少运动」后，
behavior: 'smooth'自动退化为'auto'，这是浏览器行为，无法绕过
固定头部遮挡目标？别手动算偏移
在 JS 里硬减 header 高度（比如 window.scrollTo({ top: el.offsetTop - 80 })）极易因响应式变化或字体加载错位。
- 优先用 CSS：
h2 { scroll-margin-top: 80px; }（数值等于你的 fixed header 高度） - 或调用时用
block: 'center'：el.scrollIntoView({ behavior: 'smooth', block: 'center' }) - 二者可共存：
block: 'center'保证居中，scroll-margin-top微调起点，更鲁棒
局部滚动容器怎么启用平滑滚动
scroll-behavior: smooth 不继承，必须显式设在可滚动容器上，且该容器得满足基本滚动前提。
- 容器必须有固定尺寸 +
overflow: auto（或scroll、overlay） - 示例：
.chat-history { height: 400px; overflow-y: auto; scroll-behavior: smooth; } - 若容器内元素是
display: none或尚未渲染，scrollIntoView会静默失败 - 当目标不在 document 而在局部容器内时，应改用
container.scrollTo({ top: target.offsetTop - container.offsetTop, behavior: 'smooth' })，并用getBoundingClientRect()处理 padding/border 干扰
真正容易被忽略的，是“滚动容器是否真正可滚动”——scroll-behavior 不创造滚动能力，它只修饰已有滚动行为。如果页面内容高度不足一屏，或局部容器没有 overflow，加了也白加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
