纯JS实现页面返回顶部功能：直接跳转与平滑滚动方案

作者：小圆点时间：2026-10-31 14:12:19浏览：133

本文介绍如何使用纯JavaScript实现页面返回顶部功能。对比了直接设置scrollTop为0的即时跳转与使用requestAnimationFrame实现的平滑滚动两种方案。详细解析了按钮显示隐藏逻辑、滚动位置获取及速度控制，并提供完整代码示例与CSS过渡效果建议，优化用户浏览体验。

1. 需求场景

当用户点击页面中的浮动按钮时，页面需要自动滚动至顶部。

2. 需求实现分析

方法一：直接操作 body 或 documentElement 的 scrollTop 属性，将其值设为 0，即可实现页面跳转至顶部。
方法二：调用 window.scrollTo 方法，实现页面滚动至顶部。

3. 方案一：直接返回顶部

3.1 代码逻辑分析

首先获取返回顶部按钮的DOM元素。
监听页面滚动事件以控制按钮的显示与隐藏： 2.1 获取当前页面的滚动距离； 2.2 判断该距离是否超过预设的显示阈值，若超过则显示按钮，否则隐藏。
绑定按钮点击事件，执行滚动到顶部的操作。

3.2 代码实现

      function scrollToTop({elem, speed = 5, top = 0, showDistance = 500, callback}) {
        // 获取返回顶部按钮
        let backToTopButton = document.getElementById(elem);
        // 当页面滚动时显示或隐藏返回顶部按钮
        window.onscroll = function() {
          // 获取当前滚动的位置
          let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
          // 判断是否超过设置的显示距离，超过就显示，否则就隐藏
          if (currentScroll  > showDistance) {
            backToTopButton.style.display = "block";
          } else {
            backToTopButton.style.display = "none";
          }
        };
        // 滚动到顶部
        backToTopButton.addEventListener("click", function() {
          document.body.scrollTop = 0;
          document.documentElement.scrollTop = 0;
        });
      }

3.3 总结

由于直接设置 scrollTop 为 0，执行过程缺乏过渡效果，页面瞬间跳转，用户体验不够平滑。

4. 方案二：平滑滚动

4.1 代码实现分析

获取返回顶部按钮的DOM元素。
监听页面滚动事件以控制按钮的显示与隐藏： 2.1 获取当前页面的滚动距离； 2.2 判断该距离是否超过预设的显示阈值，若超过则显示按钮，否则隐藏。
实现平滑滚动至顶部的逻辑： 3.1 获取当前页面的滚动距离； 3.2 若当前不在顶部，则启动滚动动画； 3.3 动画结束后执行指定的回调函数。
封装滚动函数： 4.1 获取当前页面的滚动距离； 4.2 若当前不在顶部，则启动滚动动画； 4.3 通过调整参数控制滚动的速度。

4.2 代码实现

     function scrollToTop({elem, speed = 5, top = 0, showDistance = 500, callback}) {
        // 获取返回顶部按钮
        let backToTopButton = document.getElementById(elem);
        // 当页面滚动时显示或隐藏返回顶部按钮
        window.onscroll = function() {
          // 获取当前滚动的位置
          let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
          // 判断是否超过设置的显示距离，超过就显示，否则就隐藏
          if (currentScroll > showDistance) {
            backToTopButton.style.display = "block";
          } else {
            backToTopButton.style.display = "none";
          }
        };
        // 平滑滚动到顶部
        backToTopButton.addEventListener("click", function() {
          // 获取当前滚动的位置
          let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
          // 如果当前不在顶部，则开始滚动动画
          if (currentScroll > top) {
            window.requestAnimationFrame(smoothScroll); // 运行动画
          } else {
            // 到达指定位置，执行回调函数
            callback && callback();
          }
        });
		// 滚动函数
        function smoothScroll() {
          // 获取当前滚动的位置
          let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
          // 如果当前不在顶部，则开始滚动动画
          if (currentScroll > top) {
            window.requestAnimationFrame(smoothScroll);
            window.scrollTo(0, currentScroll - (currentScroll / speed)); // 控制滚动速度
          }
        }
      }

4.3 总结

该方案实现了页面平滑滚动至顶部的效果。
支持在滚动动画完成后执行自定义的回调函数。

5. 注意

可以通过CSS添加过渡效果使滚动更加平滑，从而提升用户体验。可添加以下CSS代码：

html {
  scroll-behavior: smooth;
}

总结

本文介绍了纯JS实现返回页面顶部功能的方法，更多相关js返回页面顶部内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JS在setTimeout或Ajax回调中打开新标签页失败怎么处理

2026-11-05 15:50:12

JS直播协议选型：HLS、FLV与WebRTC的延迟与兼容性对比

2026-11-05 12:16:14

JS实现回到顶部：scrollTop赋值与浏览器兼容性处理

2026-11-04 23:43:35

JS使用classList动态添加、移除和切换CSS类名

2026-11-04 23:40:58

在 D3.js 中实现平滑过渡动画的技巧

2026-11-03 23:46:09