JavaScript DOM 操作怎么实现回到顶部的平滑滚动按钮-js教程-PHP中文网

javascript实现回到顶部按钮需三步：1. html添加固定按钮并css控制显隐（滚动超300px显示）；2. 监听scroll事件，用requestanimationframe节流更新按钮状态；3. 点击时调用window.scrollto({top:0,behavior:'smooth'})平滑滚动至顶部。

javascript dom 操作怎么实现回到顶部的平滑滚动按钮

用 JavaScript 实现回到顶部的平滑滚动按钮，核心是监听滚动位置、控制按钮显隐，并调用 scrollTo 配合 behavior: 'smooth' 触发自然滚动。

1. 创建并显示回到顶部按钮

在 HTML 中添加一个固定定位的按钮，初始隐藏；用 CSS 控制样式和出现时机（比如滚动超过 300px 后显示）：

<button id="backToTop" class="back-to-top">↑</button>

CSS 示例（可直接复用）：

Alibabacloud Sdk Client Initialization For Java

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

下载

.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #333;
  color: white;
  border: none;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
.back-to-top.show {
  opacity: 1;
  transform: translateY(0);
}

2. 监听滚动并控制按钮显隐

监听 window.scrollY，当滚动距离超过阈值（如 300px）时显示按钮：

用 scroll 事件监听，但建议节流（例如用 requestAnimationFrame 或简单开关防抖）避免频繁触发
检查 window.scrollY > 300，满足则添加 show 类，否则移除

3. 绑定点击事件实现平滑滚动

给按钮绑定点击事件，调用 window.scrollTo 并指定平滑行为：

window.scrollTo({ top: 0, behavior: 'smooth' }) 是标准且兼容性良好的方式（现代浏览器均支持）
无需 jQuery 或第三方库，原生即可完成
可选：点击后自动隐藏按钮（或保持显示，视交互需求而定）

4. 完整可运行示例代码

把以下 JS 放在底部或 DOM 加载完成后执行：

const backToTopBtn = document.getElementById('backToTop');

// 显示/隐藏逻辑（带简单防抖）
let ticking = false;
function updateButtonVisibility() {
  if (!ticking) {
    requestAnimationFrame(() => {
      const shouldShow = window.scrollY > 300;
      backToTopBtn.classList.toggle('show', shouldShow);
      ticking = false;
    });
    ticking = true;
  }
}

// 滚动监听
window.addEventListener('scroll', updateButtonVisibility);

// 点击回到顶部
backToTopBtn.addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南