如何順利滾動頁面？

Question

我需要以動畫的方式將頁面加載到頁面上的某個位置。 它工作正常（使用jQuery的動畫）：

$(document).ready(function () {
    $('html, body').animate({
        scrollTop: $('#today').offset().top - 50
    }, 800, "linear");
});

然而，有一點不是很順利。 特別是在移動設備上，它感覺非常生澀。

我已經看到一些CSS動畫（使用transition和transform ）非常流暢，但無法弄清楚如何將其應用於頁面滾動。 是否有可能使用CSS做我想做的事情？

Answer 1

嘗試設置以下css：

<style type="text/css">
    html {
      scroll-behavior: smooth !important;
    }
</style>

您也可以嘗試使用vanilla JavaScript而不是jQuery：

function showIt(el_id) {
    var el = document.getElementById(el_id);
    el.scrollIntoView(true, {behavior: "smooth"});
}
showIt('today')

還可以考慮在頁面中間添加一個itermediary元素，例如：

<div id="middle" style="display: none;"></div>

function showIt(el_id) {
    var middle_el = document.getElementById('middle');
    var el = document.getElementById(el_id);
    middle_el.scrollIntoView(true, {behavior: "instant"});  // Go to middle directly and then scroll slowly to #today.
    el.scrollIntoView(true, {behavior: "smooth"});
}
showIt('today')

有關scrollIntoView的更多信息： https ： //developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

您可能也會感興趣： 使用overflow時在mobile / ios上滾動速度：如果你在iOS上則滾動

Answer 2

我發現跨瀏覽器/跨設備正常平滑scrollTop的最佳解決方案是使用velocity.js 。 它比jQuery的動畫更快，很輕，支持多種語法，其中一種是jQuery.animate()使用的語法，所以你需要做的就是用.animate()替換.velocity() （並加載東西） ， 當然）。

我知道可能還有其他解決方案，但是這個解決方案多年來一直很穩定，他們總是保持最新狀態，我會說它是任何嚴肅的前端Web開發人員工具的守護者。 你會在velocity的libscore頁面上找到一些非常奇特的名字。 不，我不是附屬的。 我很感激能夠免費使用它。

Answer 3

嘗試使用easeOutCubic或其他緩動函數（ 在這里選擇一個 ）：

$(document).ready(function () {
    $('html, body').animate({
        scrollTop: $('#today').offset().top - 50
    }, 800, "easeOutCubic");
});