怎么实现平滑滚动

最可靠方案是给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 隐藏。