javascript - 自動滾動到頁面底部

我有一個問題清單。當我點擊第一個問題時，它應該自動帶我到頁面底部的特定元素。

我該如何使用 jQuery 來做到這個？

答案＃1

jQuery 不是必要的。我從 Google 搜尋得到的大多數頂級結果都給了我這個答案：

window.scrollTo(0, document.body.scrollHeight);

當你有巢狀元素時，文件可能無法滾動。在這種情況下，你需要鎖定可滾動的元素並使用其滾動高度。

nestedElement.scrollTo(0, nestedElement.scrollHeight);

你可以參考的一些其他來源：

http://www.alecjacobson.com/weblog/?p=753
http://www.mediacollege.com/internet/javascript/page/scroll.html
http://www.electrictoolbox.com/jquery-scroll-bottom/

答案＃2

將整個頁面滾動到底部：

const scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;

你可以在這裡觀看示範

將特定元素滾動到底部：

const scrollToBottom = (id) => {
    const element = document.getElementById(id);
    element.scrollTop = element.scrollHeight;
}

這裡是演示

而這就是它的運作方式：

參考：scrollTop、scrollHeight、clientHeight

更新： 最新版本的 Chrome（61 以上）和 Firefox 不支援 Body 滾動，參見： https://dev.opera.com/articles/fixing-the-scrolltop-bug/

答案＃3

原生 JS 實作：

element.scrollIntoView(false);

https://developer.mozilla.org/zh-TW/docs/Web/API/element.scrollIntoView

答案＃4

你可以使用這個以動畫形式向下瀏覽頁面。

$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");

答案＃5

用一行程式碼平滑滾動到底部

window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" });

要向上滾動，只需將 top 設置為 0

答案＃6

以下應該是跨瀏覽器的解決方案。它已在 Chrome、Firefox、Safari 和 IE11 上測試過。

window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);

window.scrollTo(0,document.body.scrollHeight); 在 Firefox 上不起作用，至少對於 Firefox 37.0.2

答案＃7

有時候頁面在滾動時會延伸到底部（例如在社交網路中），要滾動到頁面末端（頁面的最底部）時，我使用這個腳本：

var scrollInterval = setInterval(function() { 
    document.documentElement.scrollTop = document.documentElement.scrollHeight;
}, 50);

如果你在瀏覽器的 JavaScript 控制台中，能夠停止滾動可能會很有用，所以添加：

var stopScroll = function() { clearInterval(scrollInterval); };

然後使用 stopScroll();。

如果你需要滾動到特定的元素，使用：

var element = document.querySelector(".element-selector");
element.scrollIntoView();

或用於自動滾動到特定元素的通用腳本（或停止頁面滾動間隔）：

var notChangedStepsCount = 0;
var scrollInterval = setInterval(function() {
    var element = document.querySelector(".element-selector");
    if (element) { 
        // element found
        clearInterval(scrollInterval);
        element.scrollIntoView();
    } else if((document.documentElement.scrollTop + window.innerHeight) != document.documentElement.scrollHeight) { 
        // no element -> scrolling
        notChangedStepsCount = 0;
        document.documentElement.scrollTop = document.documentElement.scrollHeight;
    } else if (notChangedStepsCount > 20) { 
        // no more space to scroll
        clearInterval(scrollInterval);
    } else {
        // waiting for possible extension (autoload) of the page
        notChangedStepsCount++;
    }
}, 50);

答案＃8

僅使用 CSS？!

一個有趣的僅使用 CSS 的替代方案：

display: flex; 
flex-direction: column-reverse;

  /* ...probably usually along with: */

overflow-y: scroll;  /* or hidden or auto */
height: 100px; /* or whatever */

它不是萬無一失，但我發現它在幾種情況下都很有幫助。

文件說明：flex、flex-direction、overflow-y

^示範：

var i=0, foo='Lorem Ipsum & foo in bar or blah ! on and'.split(' ');
setInterval(function(){demo.innerHTML+=foo[i++%foo.length]+' '},200)

#demo{ display:flex;
       flex-direction:column-reverse;
       overflow-y:scroll;
       width:150px; 
       height:150px;
       border:3px solid black; }
body{ font-family:arial,sans-serif; 
      font-size:15px; }

Autoscrolling demo:&#x1f43e;
<div id='demo'></div>

答案＃9

你也可以用動畫做這個，這非常簡單

$('html, body').animate({
   scrollTop: $('footer').offset().top
   //scrollTop: $('#your-id').offset().top
   //scrollTop: $('.your-class').offset().top
}, 'slow');

希望有幫助，謝謝

答案＃10

你可以在任何需要調用它的地方使用這個函數：

function scroll_to(div){
   if (div.scrollTop < div.scrollHeight - div.clientHeight)
        div.scrollTop += 10; // move down

}

jquery.com：滾動到

答案＃11

有這麼多答案試圖計算文件的高度。但對我來說，它們並沒有正確計算。然而，這兩個方法都有效：

jquery

    $('html,body').animate({scrollTop: 9999});

或只是 js

    window.scrollTo(0,9999);