javascript - ページの一番下まで自動的にスクロール

Question

質問のリストがあります。最初の質問をクリックすると、ページの下部にある特定の要素に自動的に移動します。

jQueryでこれを行うにはどうすればよいですか?

score 1101 · Accepted Answer

jQuery は必要ありません。Google 検索で得た上位の結果のほとんどから、次のような答えが得られました。

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

ネストされた要素がある場所では、ドキュメントがスクロールしない場合があります。この場合、スクロールする要素をターゲットにして、代わりにそのスクロールの高さを使用する必要があります。

window.scrollTo(0,document.querySelector(".scrollingContainer").scrollHeight);

onclickそれを質問のイベント（つまり）に結び付けることができます<div onclick="ScrollToBottom()" ...。

あなたが見ることができるいくつかの追加のソース：

score 164 · Accepted Answer

ページ全体を一番下までスクロールするには:

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

JSFiddleの例を参照してください

要素を一番下までスクロールするには:

function gotoBottom(id){
   var element = document.getElementById(id);
   element.scrollTop = element.scrollHeight - element.clientHeight;
}

そして、これがどのように機能するかです：

参照: scrollTop、scrollHeight、clientHeight

更新: Chrome (61+) および Firefox の最新バージョンは、本文のスクロールをサポートしていません。https://dev.opera.com/articles/fixing-the-scrolltop-bug/ を参照してください。

score 80 · Accepted Answer

バニラ JS の実装:

element.scrollIntoView(false);

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

score 30 · Accepted Answer

以下は、クロスブラウザソリューションです。Chrome、Firefox、Safari、IE11 でテスト済み

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

window.scrollTo(0,document.body.scrollHeight); 少なくとも Firefox 37.0.2 では、Firefox では動作しません。

score 17 · Accepted Answer

スクロールするとページが拡張されてボタン (ソーシャルネットワークなど) が表示され、最後 (ページの最後のボタン) までスクロールされることがあります。私は次のスクリプトを使用します。

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);

score 13 · Accepted Answer

この関数は、呼び出す必要がある場所ならどこでも使用できます。

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

}

jquery.com：ScrollTo

score 4 · Accepted Answer

link 要素のid参照属性に任意のものを添付できます。href

<a href="#myLink" id="myLink">
    Click me
</a>

上記の例では、ユーザーがClick meページの下部をクリックすると、ナビゲーションはClick meそれ自体に移動します。

score 3 · Accepted Answer

素敵な JavaScript プラグインであるGentle Anchorsを試すことができます。

例：

function SomeFunction() {
  // your code
  // Pass an id attribute to scroll to. The # is required
  Gentle_Anchors.Setup('#destination');
  // maybe some more code
}

互換性テスト済み:

マックファイヤーフォックス、サファリ、オペラ
Windows Firefox、Opera、Safari、Internet Explorer 5.55 以降
Linux はテストされていませんが、少なくとも Firefox では問題ないはずです

score 3 · Accepted Answer

パーティーに遅れましたが、任意の要素を一番下にスクロールする簡単な JavaScript のみのコードを次に示します。

function scrollToBottom(e) {
  e.scrollTop = e.scrollHeight - e.getBoundingClientRect().height;
}

score 2 · Accepted Answer

これが私の解決策です：

 //**** scroll to bottom if at bottom

 function scrollbottom() {
    if (typeof(scr1)!='undefined') clearTimeout(scr1)   
    var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
    var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
    if((scrollTop + window.innerHeight) >= scrollHeight-50) window.scrollTo(0,scrollHeight+50)
    scr1=setTimeout(function(){scrollbottom()},200) 
 }
 scr1=setTimeout(function(){scrollbottom()},200)

score 0 · Accepted Answer

Angular を探している人がいる場合

下にスクロールして、これをdivに追加するだけです

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

   <div class="my-list" #scrollMe [scrollTop]="scrollMe.scrollHeight">
   </div>

score -1 · Accepted Answer

window.scrollTo(0,1e10);

常に動作します。

1e10 は大きな数です。そのため、常にページの最後になります。

javascript - ページの一番下まで自動的にスクロール

25 に答える 25

Related

Reference