js返回顶部,加过渡效果

设置页面y轴位置:

windows.scrollTo(x, y);

核心代码,以下代码加到返回顶部按钮点击事件函数中即可:

1. 无固定时间,匀速向上

let scrollTop = window.pageYOffset;
// 每0.01秒向上移动100像素,直到小于或等于0结束
let timer = setInterval(() => {
    scrollTop -= 100;
    // 为负数,浏览器会不处理得
    window.scrollTo(0, scrollTop);
    if (scrollTop <= 0) {
        clearInterval(timer)
    }
}, 10)

2. 固定时间执行完匀速向上滑动(需计算以下每次向上多少像素)

// 到顶部完成时间0.5秒
let finished_time = 500;
// 每0.01秒向上运动一次
let interval_time = 10;
// 当前位置距离顶部距离
let scrollTop = window.pageYOffset;
// 计算每次间隔向上滑动多少像素
let top_pixel = scrollTop / finished_time * interval_time;
// 通过定时器进行间隔向上滑动
let timer = setInterval(() => {
    scrollTop -= top_pixel;
    // 为负数,浏览器会不处理得
    window.scrollTo(0, scrollTop);
    if (scrollTop <= 0) {
        clearInterval(timer)
    }
}, interval_time)
原文地址:https://www.cnblogs.com/zezhou/p/14213806.html