全局平滑滚动最快方案是html{scroll-behavior:smooth}，支持Chrome61+、Firefox36+、Safari15.4+、Edge79+；需注意作用于html而非body，不触发scroll事件，对scrollTo和scrollIntoView同样生效。
用 scroll-behavior: smooth 最快启用全局平滑滚动
只要在根元素上设置 CSS 属性，整个页面的锚点跳转（包括 <a href="#section">）就会自动变平滑，无需 JS。这是目前最轻量、兼容性足够好的方案。
注意：该属性需作用于 html 元素，不是 body —— 很多人写到 body 上无效就是因为这个。
html {
scroll-behavior: smooth;
}
- Chrome 61+、Firefox 36+、Safari 15.4+、Edge 79+ 均支持；iOS Safari 15.4+ 才开始支持（旧版 iOS 需降级处理）
- 不触发 JavaScript 的
scroll事件，所以依赖该事件做“滚动监听”的逻辑要额外兼容 - 对
window.scrollTo()和element.scrollIntoView()同样生效（只要没显式传{ behavior: 'auto' }）
用 scrollIntoView({ behavior: 'smooth' }) 精确控制某个元素滚动
当需要让某个特定 DOM 元素滚动到视口（比如表单校验后聚焦错误字段），用 JS 调用 scrollIntoView 更直接，且可指定对齐方式。
document.getElementById('error-field').scrollIntoView({
behavior: 'smooth',
block: 'center' // 可选 'start' | 'center' | 'end' | 'nearest'
});
-
block控制垂直对齐，inline控制水平对齐（默认'nearest'，适合响应式布局） - IE 完全不支持该选项，如需兼容 IE，得 fallback 到
scrollTop+requestAnimationFrame手动实现 - 若目标元素是
display: none或未渲染（如在v-if/*ngIf中），调用会静默失败——务必确保元素已挂载且可见
用 history.pushState + scrollTo 实现无刷新平滑跳转
SPA 中点击链接不刷新页面，但想保持平滑滚动和 URL 更新时，不能只靠 a 标签，得手动接管导航并触发滚动。
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('nav a[href^="#"]').forEach(a => {
a.addEventListener('click', e => {
e.preventDefault();
const targetId = a.getAttribute('href').slice(1);
const el = document.getElementById(targetId);
if (el) {
history.pushState(null, '', `#${targetId}`);
el.scrollIntoView({ behavior: 'smooth' });
}
});
});
- 必须检查
el是否存在，否则scrollIntoView报错：Cannot read property 'scrollIntoView' of null - 如果用了 Vue Router 或 React Router，优先用其内置的
scrollBehavior配置，避免重复实现 - 调用
pushState后，浏览器前进/后退按钮仍能触发滚动，但需监听popstate并同样执行scrollIntoView
常见失效原因和绕过技巧
平滑滚动“点了没反应”往往不是代码写错，而是被其他样式或脚本干扰了。
- 父容器设置了
overflow: hidden或overflow: auto且高度固定，会截断滚动行为——检查祖先元素的 overflow 和 height - 页面有第三方库（如某些轮播图、弹窗组件）强制重置
html.scrollTop或监听scroll并preventDefault，可用setTimeout延迟滚动稍许避开冲突 - Safari 在
position: fixed导航栏下可能出现偏移，此时给目标元素加scroll-margin-top补偿（例如scroll-margin-top: 60px） - 移动端双击缩放后，部分安卓 WebView 可能临时禁用 smooth 行为，无法通过 CSS 恢复，只能检测 UA 后降级为
auto
scroll-behavior: smooth 覆盖 80% 场景，剩下的是交互细节和边界 case。真正难的不是怎么写，而是滚动发生时，有没有别的脚本在偷偷改 scrollTop、有没有 fixed 元素遮挡、以及 Safari 那些不报错但就是不对劲的 margin 行为。 
