最可靠方案是给html元素设置scroll-behavior: smooth；写在body上无效，因页面滚动容器是html而非body，且需确保html未被重置样式破坏默认滚动上下文。
直接给 html 元素加 scroll-behavior: smooth 就行，这是最可靠、最轻量的方案。别写到 body 上——写了就失效。
为什么 scroll-behavior: smooth 不生效？
常见原因不是语法错，而是作用对象或上下文不满足滚动前提：
-
html元素本身没被设为可滚动容器（比如页面内容太短，根本不需要滚动） - 样式被更高优先级规则覆盖，比如某个 reset.css 里写了
html { scroll-behavior: auto !important; } - 用户开启了系统级动效关闭（
prefers-reduced-motion: reduce），此时浏览器会主动降级为auto - 目标锚点是
display: none、visibility: hidden或尚未挂载的 DOM（如 Vue 的v-if未触发）
怎么让某个 div 内部滚动变平滑？
局部滚动容器必须同时满足两个条件：可滚动 + 显式启用平滑行为：
- 容器需有固定尺寸和
overflow: auto（或scroll/overlay） - 在该容器上设置
scroll-behavior: smooth，不能只靠父级继承 - JS 调用
element.scrollTo({ behavior: 'smooth' })或element.scrollIntoView({ behavior: 'smooth' })才会触发动画
示例：
.chat-history {
height: 400px;
overflow-y: auto;
scroll-behavior: smooth;
}
SPA 里点击链接不刷新，但要平滑滚动到锚点
纯 a 标签跳转在 SPA 中会被路由拦截，scroll-behavior 失效。必须手动接管：
- 监听点击事件，
e.preventDefault() - 用
history.pushState()更新 URL（保持前进/后退可用） - 再调用
document.getElementById(targetId).scrollIntoView({ behavior: 'smooth' }) - 注意：若目标元素在异步加载区域（如懒加载 tab），得等 DOM 渲染完成再调用，否则静默失败
真正容易被忽略的不是“怎么写”，而是“什么时候不该写”：比如表单校验失败后自动滚动到第一个错误字段，如果目标 input 被 fieldset[disabled] 包裹，scrollIntoView 会失败且不报错——得先检查元素是否可交互、是否在视口内、是否被 CSS 隐藏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
