最简单方法是设html { scroll-behavior: smooth; }，但Safari 15.4前及部分安卓WebView不支持；JS需显式调用scrollIntoView({behavior: 'smooth'})，注意目标元素存在性与渲染时机。
css 的 scroll-behavior: smooth 最简单但有兼容性限制
在根元素（html 或 body）上设置该属性，所有原生锚点跳转都会自动平滑滚动。但注意：scroll-behavior 在 Safari 15.4 之前不支持 smooth 值，iOS Safari 直到 15.4 才真正可用；部分安卓 WebView 也存在降级为普通跳转的情况。
推荐写法（兼顾降级）：
html {
scroll-behavior: smooth;
}
/* 或作用于 body，效果一致 */
body {
scroll-behavior: smooth;
}⚠️ 别同时设在 html 和 body 上，某些旧版 Chrome 会忽略。
Element.scrollIntoView() 需显式调用，适合 JS 控制场景
当点击按钮、监听事件或动态插入内容后需要滚动时，这个 API 更可控。它默认是“瞬间滚动”，必须传入 { behavior: 'smooth' } 才生效。
立即学习“前端免费学习笔记（深入）”；
常见误用点：
- 直接调用
el.scrollIntoView()没传配置 → 不平滑 - 对未挂载/不可见的元素调用 → 无反应或滚动错位
- 在 Vue/React 中未等 DOM 更新完成就调用 → 找不到目标位置
安全写法示例：
const target = document.getElementById('section2');
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start' // 可选：控制垂直对齐方式
});
}
window.scrollTo() 适合精确像素滚动或自定义缓动逻辑
如果要滚动到固定偏移量（比如顶部留出 80px 导航栏），或者配合 requestAnimationFrame 实现自定义缓动曲线，就得用这个。
注意两点：
-
window.scrollTo(x, y)是瞬时的，必须用{ top, left, behavior: 'smooth' }对象形式 - IE 完全不支持
behavior: 'smooth'，需自行实现或引入 polyfill
基础用法：
window.scrollTo({
top: document.getElementById('contact').offsetTop - 80,
behavior: 'smooth'
});锚点链接（a[href^="#"]）需确保目标元素可滚动且有唯一 ID
很多平滑滚动失效，其实和 CSS 或 HTML 结构有关，不是 JS 问题。
必须检查：
- 目标元素（如
<div id="about">）不能是 <code>display: none或visibility: hidden - 父容器不能有
overflow: hidden且高度不足，否则目标不可见，滚动无效 - 页面不能有多个相同
id，否则getElementById或锚点跳转行为不确定 - 若用
position: fixed/sticky头部，记得在scrollIntoView或scrollTo里减去其高度
简单验证方式：手动在地址栏输入 #about 看是否能定位 → 如果连原生跳转都失败，先修 HTML/CSS。
平滑滚动看似简单，但实际落地时最常卡在「浏览器版本判断不准」「目标元素渲染时机不对」「CSS 层叠隐藏了可滚动区域」这三处。尤其在混合使用框架 + 锚点 + 固定头部的项目里，建议优先用 scrollIntoView 配合 setTimeout 或框架的生命周期钩子，比纯 CSS 方案更可控。
