JavaScript 滚动到顶部平滑 - JavaScript

在 web 开发中，有时我们希望当用户滚动页面时能够平滑地回到页面顶部。JavaScript 提供了一种简单且易于实现的方法来实现这个效果。

下面是一个使用 JavaScript 实现滚动到页面顶部平滑的代码片段：

// 滚动到页面顶部
function scrollToTop() {
  if (document.documentElement.scrollTop > 0 || document.body.scrollTop > 0) {
    // 使用 requestAnimationFrame API 实现平滑滚动效果
    window.requestAnimationFrame(scrollToTop);
    // 滚动一定的距离（这里设置为滚动到当前位置的 1/8）
    document.documentElement.scrollTop -= document.documentElement.scrollTop / 8;
    document.body.scrollTop -= document.body.scrollTop / 8;
  }
}

// 监听滚动事件，并在需要的时候调用 scrollToTop 函数
window.addEventListener('scroll', function() {
  // 当页面滚动超过 500px 时，显示回到顶部按钮
  if (document.documentElement.scrollTop > 500 || document.body.scrollTop > 500) {
    // 显示回到顶部按钮
    document.getElementById('scrollToTopButton').style.display = 'block';
  } else {
    // 隐藏回到顶部按钮
    document.getElementById('scrollToTopButton').style.display = 'none';
  }
});

// 点击回到顶部按钮时调用 scrollToTop 函数
document.getElementById('scrollToTopButton').addEventListener('click', function() {
  // 平滑滚动到页面顶部
  scrollToTop();
});

在上述代码中，我们定义了一个名为 scrollToTop 的函数，它会通过递归和 requestAnimationFrame API 实现平滑滚动效果。我们还使用 addEventListener 监听了页面滚动事件，并根据滚动的距离来显示或隐藏回到顶部按钮。最后，我们在页面中放置了一个回到顶部按钮，并为其绑定了一个点击事件，当点击按钮时会调用 scrollToTop 函数。

请确保在 HTML 文件中引入了以上代码，并为回到顶部按钮添加了 ID 为 scrollToTopButton 的唯一标识，以便在 JavaScript 中能够正确获取和操作该元素。

这是一个基本的滚动到顶部平滑的 JavaScript 实现，你可以根据实际需求进行修改和扩展。希望对你有帮助！