原生JS实现滚动条动画 (滚动到指定位置 / 返回顶部)

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://zhuanlan.zhihu.com/p/40192639

该方法支持向上和向下滚动

// 例子:滚动到距离页面顶部500px的位置 动画时间为200ms

使用方法: ScrollTop(500, 200);

你可能感兴趣的:(前端web,JS)