element.scrollIntoView({ behavior: 'smooth' }) 是最简原生平滑滚动方式，支持 block（start/center/end/nearest）和 inline 对齐；精确像素滚动用 window.scrollTo() 或容器 scrollTop 配合 scroll-behavior: smooth CSS；需注意 DOM 就绪与浏览器兼容性。
使用 element.scrollIntoView() 方法并传入 { behavior: 'smooth' } 选项，是最简单、原生支持的平滑滚动方式。
用 scrollIntoView 滚动到元素顶部
适用于让目标元素滚动至视口顶部（或对齐方式可调），浏览器原生支持，无需额外计算：
- 默认行为是滚动到视口顶部对齐：
element.scrollIntoView({ behavior: 'smooth' }); - 可指定对齐位置，例如滚动到底部对齐：
element.scrollIntoView({ behavior: 'smooth', block: 'end' }); -
block可选值为'start'（默认）、'center'、'end'、'nearest'；inline控制水平对齐
用 scrollTo 或 scrollTop 滚动到精确像素位置
当需要滚动到某个具体 Y 坐标（如页面某偏移量）时，推荐使用 window.scrollTo()：
- 滚动到页面垂直位置 1000px 处：
window.scrollTo({ top: 1000, behavior: 'smooth' }); - 若操作的是某个可滚动容器（如
div），用其scrollTop配合scrollBehavior: 'smooth'CSS 属性更可靠：
在 CSS 中先设置：div.scroll-container { scroll-behavior: smooth; }
然后 JS 中直接赋值：container.scrollTop = 800;
兼容性与降级处理
现代浏览器（Chrome 61+、Firefox 68+、Safari 15.4+、Edge 79+）均支持 behavior: 'smooth'。如需兼容老版本：
立即学习“Java免费学习笔记（深入）”；
- 可检测支持性：
if ('scrollBehavior' in document.documentElement.style) - 不支持时，改用
requestAnimationFrame手动实现缓动滚动（较复杂，一般项目中可忽略 IE 等已淘汰环境）
常见问题注意点
避免因布局未就绪导致滚动失效：
- 确保目标元素已存在于 DOM 中，异步加载内容后需等渲染完成再调用（可用
setTimeout或requestAnimationFrame微任务延迟） - 若元素被
display: none或未渲染，scrollIntoView无效；可先临时设为visibility: hidden保持占位 - 单页应用中路由跳转后立即滚动，建议在
nextTick（Vue）或useEffect的 cleanup 后置逻辑中触发
