(1)新建工具函数文件:scroll-to.ts
/*
* @Description: 控制浏览器滚动的工具函数
* @Version:
* @Author: xxx
* @Date: xxx
* @LastEditors: Please set LastEditors
* @LastEditTime: xxxx
*/
const easeInOutQuad = (t: number, b: number, c: number, d: number) => {
t /= d / 2
if (t < 1) {
return c / 2 * t * t + b
}
t--
return -c / 2 * (t * (t - 2) - 1) + b
}
// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
const requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || (window as any).mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
})()
// Because it's so fucking difficult to detect the scrolling element, just move them all
const move = (amount: number) => {
document.documentElement.scrollTop = amount;
(document.body.parentNode as HTMLElement).scrollTop = amount
document.body.scrollTop = amount
}
const position = () => {
return document.documentElement.scrollTop || (document.body.parentNode as HTMLElement).scrollTop || document.body.scrollTop
}
// 工具函数scrollTo ,to:要滚动到的位置,duration: 滚动持续时长(单位:毫秒),callback: 回调函数
export const scrollTo = (to: number, duration: number, callback?: Function) => {
const start = position()
const change = to - start
const increment = 20
let currentTime = 0
duration = (typeof (duration) === 'undefined') ? 500 : duration
const animateScroll = function() {
// increment the time
currentTime += increment
// find the value with the quadratic in-out easing function
const val = easeInOutQuad(currentTime, start, change, duration)
// move the document.body
move(val)
// do the animation unless its over
if (currentTime < duration) {
requestAnimFrame(animateScroll)
} else {
if (callback && typeof (callback) === 'function') {
// the animation is done so lets callback
callback()
}
}
}
animateScroll()
}
(2)使用如下:
import { scrollTo } from '@/utils/scroll-to'
scrollTo(0, 800) // 自动滚动到顶部,持续时长为800ms