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

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

1.绑定一个函数

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

 
服务大厅

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

 

你可能感兴趣的:(js,vue)