最可靠方式是给 html 元素设置 scroll-behavior: smooth；因浏览器主滚动容器是 html 而非 body，写在 body 上会被忽略；需确保目标元素存在、可见、可滚动且未被 CSS 隐藏。
直接给 html 元素加 scroll-behavior: smooth; 就行，这是最轻量、最可靠的方式；写在 body 上基本无效。
为什么必须写在 html 上，而不是 body
浏览器的主滚动容器是 html 元素，不是 body。即使你看到内容在 body 里“动”，实际滚动层由 html 控制。写到 body 上等于对一个不负责滚动的元素设属性，CSS 规则会被忽略。
- 错误写法：
body { scroll-behavior: smooth; }—— 大部分情况下静默失效 - 正确写法：
html { scroll-behavior: smooth; }—— 所有原生锚点跳转（a[href="#section"]）自动平滑 - 别同时写在
html和body上，某些旧版 Chrome 会优先取后者并降级为auto
scroll-behavior: smooth 不生效的常见原因
不是语法错，而是上下文或状态不满足滚动前提：
- 目标元素没有
id，或拼写/大小写不一致（id="Contact"≠#contact） - 目标元素被
display: none、visibility: hidden或尚未挂载（如 Vue 的v-if为false） - 页面内容太短，
html根本不可滚动（检查document.documentElement.scrollHeight > window.innerHeight） - 被更高优先级样式覆盖，比如某 reset.css 里写了
html { scroll-behavior: auto !important; } - 用户开启了系统级「减少运动」偏好（
@media (prefers-reduced-motion: reduce)），浏览器会强制禁用
局部滚动容器怎么启用平滑滚动
仅当容器本身可滚动时，scroll-behavior: smooth 才起作用：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 容器必须有固定尺寸 +
overflow: auto（或scroll、overlay） - 必须显式设置该属性在容器上，不能靠父级继承
- 示例：
.chat-history { height: 400px; overflow-y: auto; scroll-behavior: smooth; } - 若容器内元素是
display: none或未渲染，调用scrollIntoView会静默失败
SPA 中点击链接不刷新，但要平滑滚动到锚点
纯 a 标签在 SPA 中常被路由拦截，scroll-behavior 不触发。必须手动接管：
- 监听点击事件，
e.preventDefault() - 用
history.pushState()或路由库 API 更新 URL（保持前进/后退可用） - 再调用
document.getElementById(targetId).scrollIntoView({ behavior: 'smooth' }) - 若目标在懒加载区域（如 tab 切换后才渲染），得等 DOM 完成后再调用，否则无反应
真正容易被忽略的不是“怎么写”，而是“什么时候不该写”：比如表单校验失败后滚动到第一个 input，如果它被 fieldset[disabled] 包裹，或父级有 overflow: hidden，scrollIntoView 会静默失败，且不报错 —— 得先确认元素是否可交互、是否在视口内、是否被 CSS 隐藏。
