<p>最省事、最稳的方式是加一行 CSS：html { scroll-behavior: smooth; }，必须作用于 html 元素，写在 body 或 * 上无效；需排查 !important 覆盖、目标元素可见性及旧版 Safari 兼容性问题。</p>
直接用 href="#id" 跳转，浏览器默认是“咔”一下瞬移到目标位置；要让它平滑滚动，最省事、最稳的方式是加一行 CSS：html { scroll-behavior: smooth; }。其他方案（比如 JS 手动滚动）只在需要控制偏移、避开固定头部、或处理动态加载内容时才必要。
scroll-behavior: smooth 必须写在 html 上
很多人试了没效果，是因为写在了 body 或通配符 * 里。这个属性作用于「滚动上下文根」，而现代浏览器的主滚动容器就是 html 元素本身。写错位置等于没写。
-
html { scroll-behavior: smooth; }是唯一推荐写法，别加!important，也别试图继承 - 如果页面用了 UI 框架（如 Ant Design、Bootstrap），检查是否被重置样式覆盖，比如
html, body { scroll-behavior: auto !important; } - 目标元素不能是
display: none或藏在overflow: hidden容器里，否则浏览器根本算不出滚动位置 - 旧版 Safari（≤15.4）和所有 IE 版本不支持，需 JS 降级（见下一条）
scrollIntoView({ behavior: 'smooth' }) 的坑与绕过方式
当你点击按钮、切换路由、或目标元素是动态加载出来的，就得用 JS 主动滚动——但直接调用 element.scrollIntoView({ behavior: 'smooth' }) 很容易失败。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 目标元素必须已渲染且可见，
if (!el) return不是可选项，是必做检查 - 固定头部（
position: fixed）会遮挡目标顶部，推荐用 CSS 解决：#section1 { scroll-margin-top: 80px; }，比 JS 算偏移更稳定 - 用户连点多次会触发多个并发滚动，造成卡顿或跳错位置，必须加节流：用
setTimeout标志位或lodash.throttle - Safari ≤15.3 和部分安卓 WebView 不支持
behavior: 'smooth'，可用'scrollBehavior' in document.documentElement.style检测后降级为window.scrollTo({ top: el.offsetTop, behavior: 'auto' })
动态内容加载时锚点跳转偏移怎么办
懒加载章节、AJAX 插入区块、或者 Vue/React 异步组件渲染后，目标元素的实际 offsetTop 会变——但浏览器按旧 DOM 快照滚动，结果就停在错误位置。
立即学习“前端免费学习笔记（深入）”；
- 禁用原生锚点行为：
e.preventDefault()，别让href="#id"直接触发跳转 - 先查目标是否存在，不存在就等一帧：
requestAnimationFrame(() => scrollToTarget(id)) - 如果目标属于尚未加载的模块，得监听对应模块加载完成事件（比如自定义
customEvent或 Promise resolve），再执行滚动 - 极端情况（如多层嵌套懒加载），可考虑滚动后再次校验位置，误差超过 20px 就重试一次
真正难的不是怎么写平滑滚动，而是判断「什么时候不该用它」：比如单页应用里用 href="#id" 会污染 history stack，路由跳转时又得手动同步 hash ——这种场景，scrollIntoView 或 scrollTo 配合路由钩子才是正解。
