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);    }