滚动到顶部的实现方法

最新推荐文章于 2023-04-12 11:04:39 发布

flitrue

最新推荐文章于 2023-04-12 11:04:39 发布

阅读量1k

点赞数

分类专栏： Node.js Node.js从入门到精通文章标签： nodejs

本文链接：https://blog.csdn.net/flitrue/article/details/80433043

版权

Node.js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Node.js从入门到精通

2 篇文章 1 订阅

订阅专栏

// scrollTop animation
export function scrollTop(el, from = 0, to, duration = 500) {
    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = (
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function (callback) {
                return window.setTimeout(callback, 1000/60);
            }
        );
    }
    const difference = Math.abs(from - to);
    const step = Math.ceil(difference / duration * 50);

    function scroll(start, end, step) {
        if (start === end) return;

        let d = (start + step > end) ? end : start + step;
        if (start > end) {
            d = (start - step < end) ? end : start - step;
        }

        if (el === window) {
            window.scrollTo(d, d);
        } else {
            el.scrollTop = d;
        }
        window.requestAnimationFrame(() => scroll(d, end, step));
    }
    scroll(from, to, step);
}