定制化回到顶端的几种方式

回到顶端（实现方式以及原理）

公共代码片段

// 构建你即将回到顶端的按钮（根据需求自己定制化构建）
<div class="goBackTop" @click="goBackTop">
  <div class="goBackTopBgColor" />
  <span>回顶</span>
</div>
// 样式部分（按需编写样式）
.goBackTop {
  position: absolute;
  bottom: 20px;
  right: 138px;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  background: #2055F4;
  font-size: 14px;
  line-height: 30px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  .goBackTopBgColor {
    width: 16px;
    height: 16px;
    background-image: url('根据自己需要的图片引入或者有相关的图标');
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: auto;
    margin-top: 18px;
  }
}

第一种方式

先获取滚动条的高度，然后通过定时器的方法循环递减，最后再赋值给滚动条这个值，以下是代码片段

goBackTop() {
	let timer = null
    // 回到顶端版本 -- 1 requestAnimationFrame (定时器方法 -- 针对动画效果) cancelAnimationFrame （清除定时器方法 -- 针对动画效果）
    cancelAnimationFrame(timer);
    // 获取当前毫秒数
    const startTime = +new Date();
    // 获取当前页面的滚动高度
    const b = document.body.scrollTop || document.documentElement.scrollTop;
    const d = 500;
    const c = b;
    timer = requestAnimationFrame(function func() {
      const t = d - Math.max(0, startTime - (+new Date()) + d);
      document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d + b;
      timer = requestAnimationFrame(func);
      if (t === d) {
        cancelAnimationFrame(timer);
      }
    });
}

第二种方式

也是同理获取滚动条的值，通过循环遍历每次减固定值的方式实现最后小于0或者等于0的时候清除定时器

goBackTop() {
	// 回到顶端版本 -- 2 requestAnimationFrame (定时器方法 -- 针对动画效果) cancelAnimationFrame （清除定时器方法 -- 针对动画效果）
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn() {
      const oTop = document.body.scrollTop || document.documentElement.scrollTop;
      if (oTop > 0) {
        document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
        timer = requestAnimationFrame(fn);
      } else {
        cancelAnimationFrame(timer);
      }
    });
}

第三种方式

这种方式是通过 window 上的 scrollTo(x, y) 方法实现的传入两个值 x：水平轴方向，y：垂直方向，相关参数地址为：scrollTo使用说明

goBackTop() {
	// 回到顶端版本 -- 3 requestAnimationFrame (定时器方法 -- 针对动画效果) cancelAnimationFrame （清除定时器方法 -- 针对动画效果）
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn() {
      const oTop = document.body.scrollTop || document.documentElement.scrollTop;
      if (oTop > 0) {
        scrollTo(0, oTop - 50);
        timer = requestAnimationFrame(fn);
      } else {
        cancelAnimationFrame(timer);
      }
    });
}

第四种方式

第四种跟第三种类似只不过他们的滚动的速度不一样

goBackTop() {
	// 回到顶端版本 -- 4 requestAnimationFrame (定时器方法 -- 针对动画效果) cancelAnimationFrame （清除定时器方法 -- 针对动画效果）
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn() {
      const oTop = document.body.scrollTop || document.documentElement.scrollTop;
      if (oTop > 0) {
        scrollBy(0, -50);
        timer = requestAnimationFrame(fn);
      } else {
        cancelAnimationFrame(timer);
      }
    });
}

本篇文章纯属简单介绍前端实现回到顶部的方法，如有错误的地方还请各位看官多多指教！！！