js实现滚动到某个位置动画

场景大概是点击 tab 可以滚动到对应的位置

我在 vue 项目里使用如下：

<ul>
      <li @click="changeTab('first')"> 我是 tab 一 </li>
      <li @click="changeTab('second')"> 我是 tab 二 </li>
</ul>
<div ref="first">
      <p style="height: 1400px;"> 这里是 tab 一对应的内容 </p>
</div>
<div ref="second">
      <p style="height: 1400px;"> 这里是 tab 一对应的内容 </p>
</div>

使用递归让位置一点一点滚动，结合 requestAnimationFrame 方法在下次重绘之前调用指定的回调函数更新动画，如果用定时器 setTimeout 会出现卡顿的情况，没有 requestAnimationFrame 顺畅。

scrollY(curY, y) {if (curY !== y) {
    // 计算需要移动的距离
    let differ = Math.abs(curY-y);
    let _curY = curY;
    requestAnimationFrame(() => {let step = Math.ceil(differ / 5);
      _curY += step;
      window.scrollTo(window.scrollX, curY);
      if (differ > 5 || differ < -5) {this.scrollY(_curY, y);
      } else {window.scrollTo(window.scrollX, y);
      }
    });
  }
}

使用的时候把当前位置和要滚动到位置传递给 scrollY 函数

changeTab(val) {
      let curY = document.documentElement.scrollTop || document.body.scrollTop;
      if (this.$refs[val]) this.scrollY(curY, this.$refs[val].offsetTop);
    }