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

作者：小圆点

时间：2026-10-31

本文介绍如何使用纯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)); // 控制滚动速度
          }
        }
      }