控制滚动条平滑滚动到相应位置--js

最新推荐文章于 2025-04-27 15:31:08 发布

Call_me_small_pure

最新推荐文章于 2025-04-27 15:31:08 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签： js滚动条滚动到指定位置动画

路漫漫其修远兮，吾将上下而求索～

本文链接：https://blog.youkuaiyun.com/Call_me_small_pure/article/details/103386822

版权

js 专栏收录该内容

27 篇文章

订阅专栏

window.scrollTo({ 
		top: 0, 
		behavior: "smooth" 
});

或


this.ScrollTop(500, 200);
ScrollTop(number, 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--;
                    this.ScrollTop(nowTop += everTop);
                } else {
                    clearInterval(scrollTimer); // 清除计时器
                }
            }, spacingTime);
        },