scrollTop 動畫沒有 jquery

問題描述

我試圖使動畫 「滾動到頂部」 效果，而不使用 jQuery 。

在 jQuery 中，我通常使用這個程式碼：

$('#go-to-top').click(function(){
      $('html,body').animate({ scrollTop: 0 }, 400);
      return false;
});

如何在不使用 jQuery 的情況下動畫 scrollTop？

最佳解決方案

HTML：

<button onclick="scrollToTop(1000);"></button>

1＃JavaScript(線性)：

function scrollToTop(scrollDuration) {
    var scrollStep = -window.scrollY / (scrollDuration / 15),
        scrollInterval = setInterval(function(){
        if ( window.scrollY != 0 ) {
            window.scrollBy( 0, scrollStep );
        }
        else clearInterval(scrollInterval);
    },15);
}

2＃JavaScript(輕鬆進出)：

function scrollToTop(scrollDuration) {
const   scrollHeight = window.scrollY,
        scrollStep = Math.PI / ( scrollDuration / 15 ),
        cosParameter = scrollHeight / 2;
var     scrollCount = 0,
        scrollMargin,
        scrollInterval = setInterval( function() {
            if ( window.scrollY != 0 ) {
                scrollCount = scrollCount + 1;
                scrollMargin = cosParameter - cosParameter * Math.cos( scrollCount * scrollStep );
                window.scrollTo( 0, ( scrollHeight - scrollMargin ) );
            }
            else clearInterval(scrollInterval);
        }, 15 );
}

注意：

• 持續時間 (毫秒)(1000ms = 1s)

• 第二個指令碼使用 cos 函式。 Example curve：

由於 up-voters 的數量很多，我重新檢查了我幾年前寫過的程式碼，並嘗試最佳化它。更多的我在程式碼底部新增了一些數學解釋。

UPDATE(輕鬆進出)：

為了更平滑的幻燈片/動畫，使用 requestAnimationFrame 方法。 (在大視窗發生一點口吃，因為瀏覽器必須重新繪製一個廣泛的區域)

function scrollToTop(scrollDuration) {
    var cosParameter = window.scrollY / 2,
        scrollCount = 0,
        oldTimestamp = performance.now();
    function step (newTimestamp) {
        scrollCount += Math.PI / (scrollDuration / (newTimestamp - oldTimestamp));
        if (scrollCount >= Math.PI) window.scrollTo(0, 0);
        if (window.scrollY === 0) return;
        window.scrollTo(0, Math.round(cosParameter + cosParameter * Math.cos(scrollCount)));
        oldTimestamp = newTimestamp;
        window.requestAnimationFrame(step);
    }
    window.requestAnimationFrame(step);
}
/*
    Explanations:
    - pi is the length/end point of the cosinus intervall (see above)
    - newTimestamp indicates the current time when callbacks queued by requestAnimationFrame begin to fire.
      (for more information see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
    - newTimestamp - oldTimestamp equals the duration

      a * cos (bx + c) + d                      | c translates along the x axis = 0
    = a * cos (bx) + d                          | d translates along the y axis = 1 -> only positive y values
    = a * cos (bx) + 1                          | a stretches along the y axis = cosParameter = window.scrollY / 2
    = cosParameter + cosParameter * (cos bx)    | b stretches along the x axis = scrollCount = Math.PI / (scrollDuration / (newTimestamp - oldTimestamp))
    = cosParameter + cosParameter * (cos scrollCount * x)
*/

參考文獻

• scrollTop animation without jquery [duplicate]

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。