直接调用 window.scrollto({ top: 0, behavior: 'smooth' }) 即可平滑滚动至页面顶部；兼容性需检测 scrollbehavior 支持，不支持时降级为 window.scrollto(0, 0)；用于返回顶部按钮时建议防重复触发；滚动容器为元素时应调用其 scrollto 方法。

直接调用 window.scrollTo 并传入 { top: 0, behavior: 'smooth' } 即可实现平滑滚动到页面顶部，无需额外库或复杂逻辑。

基础用法：一行代码搞定

最简方式是：

window.scrollTo({ top: 0, behavior: 'smooth' });

这会以平滑动画将视口滚动至文档最顶端（top: 0），behavior: 'smooth' 是关键参数，启用原生滚动过渡效果。

兼容性与降级处理

该特性在现代浏览器中广泛支持（Chrome 61+、Firefox 68+、Safari 15.4+、Edge 79+），但旧版 Safari 或 IE 不支持 behavior。如需兼容，可检测后降级：

云一朵

云一朵是一款AI办公效率工具，百度网盘最新推出的智能助理。

下载

• 先检查 'scrollBehavior' in document.documentElement.style 或直接 try-catch
• 不支持时改用 window.scrollTo(0, 0)（瞬间跳转）
• 或引入轻量 polyfill（如 smoothscroll-polyfill）

配合按钮或事件使用

常见于“返回顶部”按钮，建议绑定点击事件并防止重复触发：

• 给按钮添加 id="back-to-top"
• 监听点击：document.getElementById('back-to-top').addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); });
• 可加 CSS 禁用点击期间的按钮（避免快速连点干扰动画）

注意滚动容器不是 window 的情况

如果目标是某个可滚动的元素（如 div）而非整个页面，不能用 window.scrollTo，应改用该元素的 scrollTo() 方法：

document.querySelector('.scrollable').scrollTo({ top: 0, behavior: 'smooth' });

确保该元素设置了 overflow-y: auto 或类似样式，且其内容高度超出自身高度，否则平滑滚动无效。