原生js模仿jquery Scroll動畫

有時候我們在vue項目中需要用到有關scroll的動畫,但是又沒jquery那樣的animate簡單的動畫方法,又要避免引入jquery的包導致過大,於是就用原生js模仿一個:(可用於返回頂部,錨點動畫等)

selector此參數爲id名,可直接調用該點擊事件

goAnchor(selector) {
      let anchor = this.$el.querySelector(selector);
      let total = anchor.offsetTop;
      let distance = document.documentElement.scrollTop || document.body.scrollTop;
      let step = total / 50;
      if (total > distance) {
        smoothDown();
      } else {
        let newTotal = distance - total;
        step = newTotal / 50;
        smoothUp();
      }
      function smoothDown() {
        if (distance < total) {
          distance += step;
          document.body.scrollTop = distance;
          document.documentElement.scrollTop = distance;
          setTimeout(smoothDown, 10);//自定義時間
        } else {
          document.body.scrollTop = total;
          document.documentElement.scrollTop = total;
        }
      }
      function smoothUp() {
        if (distance > total) {
          distance -= step;
          document.body.scrollTop = distance;
          document.documentElement.scrollTop = distance;
          setTimeout(smoothUp, 10);
        } else {
          document.body.scrollTop = total;
          document.documentElement.scrollTop = total;
        }
      }
    }