点击按钮平滑返回顶部的 JS 实现方法

本文详解了如何用原生 JavaScript 实现点击按钮平滑返回页面顶部的实用技巧，核心是调用 `window.scrollTo({ top: 0, behavior: 'smooth' })` 一行代码即可触发原生流畅滚动；同时涵盖按钮动态显示（基于滚动监听）、老浏览器兼容降级（如 fallback 到 `scrollIntoView` 或全局 CSS `scroll-behavior: smooth`）、防重复触发等关键优化点，兼顾简洁性、健壮性与用户体验，无需依赖第三方库，开箱即用。

用 window.scrollTo() 实现点击按钮平滑回到顶部，关键是设置 top: 0 和 behavior: 'smooth' 两个参数。

基础写法：一行搞定滚动

给按钮绑定点击事件，调用 scrollTo 并传入配置对象：

• top: 0 表示滚动到页面最顶端
• behavior: 'smooth' 启用原生平滑动画（无需额外库）
• left: 0 可选，确保水平方向也归零（通常页面不横向滚动，可省略）

示例代码：

绑定到按钮的完整操作

HTML 中放一个按钮，比如：
回到顶部

JavaScript 中获取按钮并添加点击监听：

增强体验的小技巧

让功能更友好、更健壮：

• 只在页面滚动后才显示按钮：监听 scroll 事件，当 window.scrollY > 300 时显示按钮，避免干扰首屏
• 兼容老浏览器：部分旧版 Safari 不支持 behavior: 'smooth'，可加降级处理（如用 scrollIntoView 或 CSS scroll-behavior 全局设置）
• 防止重复快速点击卡顿：滚动中禁用按钮，或用节流控制触发频率

替代方案：CSS 配合更简洁

如果只需全局生效，可在 或 上加一行 CSS：

之后任意锚点跳转（包括 window.scrollTo(0, 0)）都会自动平滑——但注意，这会影响整个页面所有滚动行为。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《点击按钮平滑返回顶部的 JS 实现方法》文章吧，也可关注golang学习网公众号了解相关技术文章。