原生js滚动动画

• scrollTop：元素滚动至上面的距离
• scrollHeight：元素滚动区域的高度
• clientHeight：元素可视区域的高度

要计算滚动距底部的距离，可以通过公式el.scrollHeight - (el.scrollTop + el.clientHeight)，得到的差值，就是距底部的距离，也可以通过设置元素的scrollTop实现滚动到特定位置，但js不支持动画，滚动并不带有动画，而是直接改变位置。为了可以实现滚动动画，可以通过setInterval函数来实现每次滚动一小段距离，这样设定一个过渡时间，就可以实现滚动动画。

const ScrollTop = (number = 0, time) => {
    if (!time) {
        document.body.scrollTop = document.documentElement.scrollTop = number
        return number
    }
    const spacingTime = 20 // 设置循环的间隔时间  值越小消耗性能越高
    let spacingInex = time / spacingTime // 计算循环的次数
    let nowTop = document.body.scrollTop + document.documentElement.scrollTop // 获取当前滚动条位置
    let everTop = (number - nowTop) / spacingInex // 计算每次滑动的距离
    let scrollTimer = setInterval(() => {
        if (spacingInex > 0) {
            spacingInex--
            ScrollTop(nowTop += everTop)
        } else {
            clearInterval(scrollTimer) // 清除计时器
        }
    }, spacingTime)
}

代码来源 ： https://blog.csdn.net/qq_39624107/article/details/81132981