原生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...