设置页面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)