window.scrollTo()滚动动画

先构造scrollAnimation方法

动画垂直滚动到页面指定位置

• $param currentY 当前位置
• $param targetY 目标位置

function scrollAnimation(currentY, targetY) {
 // 获取当前位置方法
 // const currentY = document.documentElement.scrollTop || document.body.scrollTop

 // 计算需要移动的距离
 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) {
     scrollAnimation(_currentY, targetY)
   } else {
     window.scrollTo(_currentY, targetY)
   }
 }, 1)
}
//导出待使用
module.exports = {
   scrollAnimation
}

使用方法

import { scrollAnimation } from '@assets/js/xxx.js';
//获取当前document的上滚长度
const currentY = document.documentElement.scrollTop || document.body.scrollTop
scrollAnimation(currentY, 0)