scroll-behavior: smooth 必须写在 html 元素上才对锚点跳转生效，因页面级滚动容器是 html；写在 body 上无效，常见失效原因包括样式覆盖、目标元素未渲染或不可见、id 不匹配、非原生锚点触发等。
scroll-behavior: smooth 必须写在 html 元素上，才能让 a 标签的锚点跳转（如 href="#about"）产生平滑效果；写在 body 或其他元素上基本无效。
为什么 a 标签跳转还是“唰”一下？
最常见原因是 CSS 写错了位置或被覆盖：
-
html { scroll-behavior: smooth; }是唯一可靠写法；body { scroll-behavior: smooth; }不起作用，因为body通常不是实际滚动容器 - 检查是否有第三方样式（比如重置库、UI 框架）写了
html { scroll-behavior: auto !important; }，直接覆盖你的设置 - 目标
id元素必须已渲染且可见——如果它在v-if、ngIf或display: none下，跳转会静默失败 - ID 值不能含空格或中文，比如
id="关于我们"或id="our team"都会导致选择器不匹配
scroll-behavior: smooth 只对哪些行为生效？
它只接管两类原生滚动行为：
- 用户点击
a[href^="#"]锚点链接时的跳转 - JavaScript 调用
element.scrollIntoView()（不传参数或传{ behavior: 'smooth' }） - 它 不控制
window.scrollTo()、history.pushState()或 SPA 路由切换——这些必须手动加{ behavior: 'smooth' }
局部滚动容器里怎么用？
如果你的页面内容在一个自定义滚动区（比如 div.container { overflow-y: auto; height: 600px; }），那么 scroll-behavior: smooth 必须写在这个容器上，而不是 html：
-
.container { scroll-behavior: smooth; }✅ - 目标
id元素必须也在这个.container内部，否则无法触发局部平滑滚动 - 此时
html { scroll-behavior: smooth; }对该容器内跳转无影响
真正容易被忽略的是上下文隔离：SPA 中路由切换后，scroll-behavior: smooth 不会自动触发；Shadow DOM 里的 id 也无法被外部 a 标签引用；固定定位的头部若遮挡目标区域，还得配合 scroll-margin-top 补偿偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
