如何用纯js实现返回页面顶部功能-牛翰网

1. 需求场景

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

2. 需求实现分析

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

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

3.1 代码逻辑分析

获取返回顶部按钮;
当页面滚动时显示或隐藏返回顶部按钮;
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 代码实现分析

获取返回顶部按钮；
当页面滚动时显示或隐藏返回顶部按钮；
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)); // 控制滚动速度
          }
        }
      }