仿淘宝返回顶部案例

.案例：返回顶部

1. 带有动画的返回顶部

2. 此时可以继续使用我们封装的动画函数

3. 只需要把所有的left 相关的值改为 跟 页面垂直滚动距离相关就可以了

4. 页面滚动了多少，可以通过 window.pageYOffset 得到

5. 最后是页面滚动，使用 window.scroll(x,y)

<script>
      // 1. 获取元素
      var sliderbar = document.querySelector(".slider-bar");
      var banner = document.querySelector(".banner");
      //   console.log(banner.offsetTop);
      // banner.offsetTop 就是被卷进去的头部大小
      var bannerTop = banner.offsetTop;
      // 当我们侧边栏固定定位之后应该是变化的数值
      var sliderbarsTop = sliderbar.offsetTop - bannerTop;
      // 获取main主体
      var main = document.querySelector(".main");
      var goBack = document.querySelector(".goBack");
      var mainTop = main.offsetTop;
      // 2. 页面滚动元素
      document.addEventListener("scroll", function () {
        // console.log(11);
        // console.log(window.pageYOffset);
        //  当我们页面被卷去的头部大于等于171 此时 侧边栏就要改为固定定位
        if (window.pageYOffset >= banner.offsetTop) {
          sliderbar.style.position = "fixed";
          sliderbar.style.top = sliderbarsTop + "px";
        } else {
          sliderbar.style.position = "absolute";
          sliderbar.style.top = "300px";
        }
        if (window.pageYOffset >= main.offsetTop) {
          goBack.style.display = "block";
        } else {
          goBack.style.display = "none";
        }
      });
      // 3. 当我们点击返回顶部模块，就让窗口滚动到页面的最上方
      goBack.addEventListener("click", function () {
        // 里面的x 和 y 不跟单位的 直接写数字即可
        // window.scroll(0,0)
        // 因为是窗口滚动 所以对象是window
        animate(window, 0);
      });

      // 动画函数
      function animate(obj, target, callback) {
        // 先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.times);
        obj.times = setInterval(function () {
          // 步长值写道定时器的里面
          // 把我们步长改为整数 不要出现小数
          //   var sept = Math.ceil((target - obj.offsetLeft) / 10); 因为有前进和后退 所以要用判断条件
          var sept = (target - window.pageYOffset) / 10;
          sept = sept > 0 ? Math.ceil(sept) : Math.floor(sept);
          if (obj.window.pageYOffset == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.times);
            if (callback) {
              callback();
            }
          }
          // 把每次加 1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10
          //   obj.style.left = obj.offsetLeft + sept + "px";
          window.scroll(0, window.pageYOffset + sept);
        }, 15);
      }
    </script>