js返回頂部,加過渡效果
阿新 • • 發佈:2020-12-30
設定頁面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)