楼层跳转滚动条缓慢滑动至当前楼层 vue 原生js

vue的项目，其实jq里有一个animate函数可以直接用，但是不想用jq，而且搜了一下animate，但是都是一个元素出入效果，不是我想要的那种从一个起点滑到另一个重点的那种。

1.绑定一个函数

里面传参点击这个服务大厅要跳转的滚动条的高度

 <div @click="scrol(1500)">服务大厅</div>

2.主要函数

递归的思想，这个是我在搜的时候，网上资源乱七八糟一大堆，但是都不适用自己项目，忽然有一篇看着还可以其中的递归点亮了我的脑袋

 methods:{
    //点击滚动
    scrol(a){
      var now = document.documentElement.scrollTop;//获取当前滚动条的高度
      var stance = now -a;//当前与要去的楼层的差距
      var i = 0;//初始字段
        if(now>a){ //向上滑动
          setup();
        }else{
          setdown();
        }
        //向上
        function setup(){
          now = document.documentElement.scrollTop; //每次向上都要先获取目前的高度
          if(now>a && i<50){  //分为50个小份向上滑动
            document.documentElement.scrollTop = Number(now - stance/50);
            i++;
            setTimeout(setup,10); //每10ms滑动一次，然后递归直到最后50次后定位
          }else{
            document.documentElement.scrollTop = a;
          }
        }
        //向下
        function setdown(){
          now = document.documentElement.scrollTop;
          if(now<a && i<50){
            document.documentElement.scrollTop = Number(now - stance/50);
            i++;
            setTimeout(setdown,10);
          }else{
            document.documentElement.scrollTop = a;
          }
        }
    }
    },