优先使用 scroll-behavior: smooth，它直接作用于 html 元素，使所有原生跳转、scrollintoview() 和未指定 behavior 的 scrollto() 自动平滑滚动，兼容主流现代浏览器且零 js 风险。
直接用 scroll-behavior: smooth 就行，现代浏览器全支持，不需 JS、不改 HTML 结构、不写一行逻辑——这是最稳、最快、最不易出错的方案。
为什么优先用 scroll-behavior: smooth
它不是“一种可选方案”，而是当前标准锚点滚动的默认行为控制机制。加在 上后，所有原生跳转（<a href="#section"></a>）、Element.scrollIntoView()、甚至未显式指定 behavior 的 window.scrollTo() 都自动平滑。
- 兼容性已足够：Chrome 61+、Firefox 68+、Safari 15.4+、Edge 79+，覆盖 2026 年绝大多数用户
- 不干扰路由：单页应用中 hash 变化仍能触发，且不强制修改 URL 或重载页面
- 无节流风险：CSS 级控制天然避免 JS 多次点击导致的滚动冲突或卡顿
- 不和第三方滚动库打架：只要没同时启用
locomotive-scroll这类接管 scroll 的库，就完全安全
scrollIntoView({ behavior: 'smooth' }) 什么时候必须用
当你要动态触发滚动（比如按钮点击、Tab 切换、hashchange 监听），或目标元素被 position: fixed 头部遮挡时，就得靠 JS 主动调用。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 务必加
block: 'start'，否则默认center可能导致目标元素被截掉顶部 - 要避开固定头部？别手动算偏移，用
scroll-margin-top: 80px（写在目标元素上）更可靠 - 必须判空：
if (el) el.scrollIntoView({ behavior: 'smooth' })，否则报Cannot read property 'scrollIntoView' of null - 连点场景要节流：快速点两次，会发起两个并发滚动，结果可能错位；用
setTimeout+ 标志位或lodash.throttle控制
window.scrollTo() 和 animate() 不推荐轻碰
除非你明确需要自定义缓动函数（如 easeOutCubic）或滚动容器非 window，否则没必要绕开原生 API。
-
window.scrollTo({ top: el.offsetTop, behavior: 'smooth' })看似灵活，但offsetTop不含 margin、不响应 CSS transform、在 flex/grid 布局下易失准 - jQuery 的
$('html, body').animate({ scrollTop: ... })已过时：双 target（html/body）是为兼容旧 IE，现在反而容易因文档模式差异导致跳两次 - 手写
requestAnimationFrame滚动动画——调试成本高、边界 case 多（如页面 resize、target 元素 DOM 变更），纯属重复造轮子
真正容易被忽略的点是：锚点失效往往不是滚动逻辑问题，而是 id 值非法（含空格、中文、开头数字）、目标元素 display: none 或父级 overflow: hidden 截断了滚动上下文——先检查这些，再动代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
