樓層跳轉滾動條緩慢滑動至當前樓層 vue

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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章