最常用且兼容性好的方式是调用 window.scrollTo() 方法：现代浏览器用 window.scrollTo({ top: 0, behavior: 'smooth' }) 实现平滑滚动；旧版浏览器降级为 window.scrollTo(0, 0) 或 document.documentElement.scrollTop = 0；可监听 scroll 事件，当 pageYOffset > 300px 时显示按钮；也可用 document.getElementById('top').scrollIntoView({ behavior: 'smooth' })。

用 JavaScript 实现点击按钮回到页面顶部，最常用且兼容性好的方式是调用 window.scrollTo() 方法。

使用 scrollTo 平滑滚动到顶部

这是现代推荐的做法，支持平滑滚动效果：

• 在按钮的 onclick 事件中执行：
  window.scrollTo({ top: 0, behavior: 'smooth' });
• 如果绑定事件用 JS，可这样写：
  document.getElementById('backTopBtn').addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); });
• behavior: 'smooth' 是关键，让滚动有动画过渡；不加则为瞬时跳转

兼容老浏览器：用 scrollTo 简单版

IE 或某些旧版本不支持 behavior 选项，可降级处理：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 直接传入坐标：
  window.scrollTo(0, 0);
• 或用 scrollTop = 0 配合 document.documentElement（更稳妥）：
  document.documentElement.scrollTop = 0;
  （也建议同时设置 document.body.scrollTop = 0，兼顾不同渲染模式）

自动显示“回到顶部”按钮

通常希望用户下拉一段距离后才显示按钮，提升体验：

立即学习“Java免费学习笔记（深入）”；

• 监听 scroll 事件，判断 window.pageYOffset（或 document.documentElement.scrollTop）是否超过阈值（如 300px）
• 超过则显示按钮（例如修改 style.display = 'block'），否则隐藏
• 示例逻辑：
  if (window.pageYOffset > 300) { backTopBtn.style.display = 'block'; } else { backTopBtn.style.display = 'none'; }

小技巧：用 scrollIntoView 替代（适用于有锚点的情况）

如果页面顶部有个元素（比如 <header id="top">），也可让该元素滚动进视口：

• document.getElementById('top').scrollIntoView({ behavior: 'smooth' });
• 注意：这个方法滚动的是目标元素的**顶部对齐视口顶部**，不是绝对页面顶部；若目标元素有 margin/padding，可能有偏移