原生JS基於window.scrollTo()封裝垂直滾動動畫工具函數

概要：

原生JS基於window.scrollTo()封裝垂直滾動動畫工具函數，可應用與錨點定位、回到頂部等操做。

封裝緣由：
在vue項目中，遇到須要實現垂直滾動效果的需求，初步想到的方法有兩個：
1：使用window.scrollTo()方法，可是這個方法是沒有動畫效果的，須要手動封裝一下。
2：使用JQuery的動畫函數，缺點比較明顯：須要引入JQuery。
顯然，選擇第一種好不少。

如下爲封裝window.scrollTo()的方法scroll()，文件名爲scroll.js

// Created by xiaoqiang on 30/05/2018.
/**
 * @param {numeber} currentY 須要移動的dom當前位置離網頁頂端的距離
 * @param {number} targetY 須要移動的dom當前位置離要移到的位置的距離
 */
function scroll (currentY, targetY) {
  // 計算須要移動的距離
  let needScrollTop = targetY - currentY
  let _currentY = currentY
  setTimeout(() => {
    // 一次調用滑動幀數，每次調用會不同
    const dist = Math.ceil(needScrollTop / 10)
    _currentY += dist
    window.scrollTo(_currentY, currentY)
    // 若是移動幅度小於十個像素，直接移動，不然遞歸調用，實現動畫效果
    if (needScrollTop > 10 || needScrollTop < -10) {
      scroll(_currentY, targetY)
    } else {
      window.scrollTo(_currentY, targetY)
    }
  }, 1)
}
// 暴露此方法
export default scroll

使用方法

好比在vue中，能夠這樣用：
import scroll form '@/common/util/scroll.js'
隨後在響應觸發事件的函數中調用scroll()，須要傳入兩個參數，好比：

methods: {
        test () {
          const scrollHeight = document.getElementsByClassName('scroll-element')[0].offsetTop
          const currentY = document.documentElement.scrollTop || document.body.scrollTop
          scroll(currentY, scrollHeight)
        }
      }

本人博客地址：https://ecmascripter.blog.csd...