1. 程式人生 > 實用技巧 >js返回頂部,加過渡效果

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)