JS操作滚动条置顶+动画效果

原创

黑子Kuroko 2022-01-09 16:59:57 ©著作权

文章标签 滚动条滚动条置顶滚动条置顶动画 scrollTop scrollTo 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者黑子Kuroko的原创作品，请联系作者获取转载授权，否则将追究法律责任

一、最实用方法：

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

调用 scrollTo 方法，并设置 behavior 动画效果。等同于自己手动设置元素的 scrollTop = 0

window.scrollTo 说明：

语法1:

　window.scrollTo(x-coord,y-coord)

x-coord 是文档中的横轴坐标。
y-coord 是文档中的纵轴坐标。

语法2：

　window.scrollTo(options)

top 等同于 y-coord
left 等同于 x-coord
behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant

More：

scroll() 此方法接收两个参数，依次为X坐标和Y坐标；设置滚动条的偏移位置

scrollTo() 此方法和scroll()作用一样，都是设置滚动条的偏移位置。

scrollBy() 此法发同样接收两个参数，不过参数分别为X轴的偏移量和Y轴的偏移量，并且可以增加或者减少。

二、最粗暴的方法：

window.scrollTop = 0;

直接设置滚动条高度为0，该方法效果比较突兀，体验不好。

三、自定义方法：

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);
};