【JavaScript】---- 纯 js 实现返回页面顶部

1. 需求场景

点击页面中的浮标，页面自动返回顶部。

2. 需求实现分析

1. 直接使用 body 或者 documentElement 的 scrollTop 属性，直接设置为 0；就能返回页面顶部；
2. 使用 window.scrollTo 方法，实现返回页面顶部。

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

3.1 代码逻辑分析

1. 获取返回顶部按钮;
2. 当页面滚动时显示或隐藏返回顶部按钮;
   2.1 获取当前滚动的位置;
   2.2 判断是否超过设置的显示距离，超过就显示，否则就隐藏;
3. 滚动到顶部。

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 总结

1. 由于直接设置 scrollTop 为 0，因此执行过程不够平滑，直接返回顶部，体验不好！

4. 方案二：平滑滚动

4.1 代码实现分析

1. 获取返回顶部按钮；
2. 当页面滚动时显示或隐藏返回顶部按钮；
   2.1 获取当前滚动的位置；
   2.2 判断是否超过设置的显示距离，超过就显示，否则就隐藏；
3. 平滑滚动到顶部；
   3.1 获取当前滚动的位置；
   3.2 如果当前不在顶部，则开始滚动动画；
   3.3 到达指定位置，执行回调函数；
4. 滚动函数；
   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 总结

1. 实现了平滑滚动到顶部；
2. 在滚动完成后执行回调函数。

5. 注意

1. 使用CSS来添加一些过渡效果会让滚动更加平滑，并增强用户体验。可以添加以下CSS代码：

html {
  scroll-behavior: smooth;
}