JavaScript中BOM平滑滚动有四种方式：一是scrollTo实现绝对位置滚动，如顶部、底部或元素顶部；二是scrollBy实现相对位移滚动；三是scrollIntoView让元素自动进入视口，语义清晰且支持居中对齐；四是CSS全局启用scroll-behavior: smooth。
JavaScript 中 BOM 控制浏览器平滑滚动，核心是利用原生支持的 behavior: 'smooth' 选项，无需手写动画逻辑，现代浏览器已广泛兼容。
用 scrollTo 实现绝对位置平滑滚动
scrollTo 适合精确滚动到页面某像素坐标，比如顶部、底部或某个元素的垂直偏移量：
- 滚动到页面顶部：
window.scrollTo({ top: 0, behavior: 'smooth' }); - 滚动到页面底部：
window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' }); - 滚动到某元素顶部：先获取元素距文档顶部距离，再传入 top 值
const el = document.getElementById('contact');<br> const top = el.getBoundingClientRect().top + window.scrollY;<br> window.scrollTo({ top, behavior: 'smooth' });
（推荐用getBoundingClientRect().top + scrollY，比offsetTop更可靠，能正确处理定位、边距等影响）
用 scrollBy 实现相对位移平滑滚动
scrollBy 以当前滚动位置为基准，做增量式滚动，适合“向下翻一屏”“向右滑动”等交互：
- 向下滚动 300 像素：
window.scrollBy({ top: 300, behavior: 'smooth' }); - 向上滚动 150 像素：
window.scrollBy({ top: -150, behavior: 'smooth' }); - 同时水平和垂直滚动：
window.scrollBy({ left: 100, top: -200, behavior: 'smooth' });
用 scrollIntoView 让元素自动进入视口（更推荐）
这是语义最清晰、代码最简洁的方式，尤其适合锚点导航、表单错误定位等场景：
立即学习“Java免费学习笔记（深入）”；
- 滚动到元素顶部对齐视口顶部：
el.scrollIntoView({ behavior: 'smooth' }); - 滚动到元素居中显示：
el.scrollIntoView({ block: 'center', behavior: 'smooth' }); - 兼顾水平居中（如横向可滚动容器）：
el.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' }); - 注意：若目标元素被
overflow: hidden的父容器包裹，需确保该容器本身可滚动，否则 scrollIntoView 不生效
CSS 全局启用平滑滚动（零 JS 方案）
在样式表中添加一行即可让所有锚点跳转和 scrollIntoView 默认启用平滑效果：
html { scroll-behavior: smooth; }- 优点：简洁、统一、性能好；缺点：无法动态控制行为（如条件性禁用）、不支持回调、部分旧版 iOS Safari 存在渲染异常
- 与 JS 方案不冲突，可共存。JS 中显式设置
behavior: 'smooth'优先级更高
