259

私のページにdivがあります：

<div id='div1' style='overflow:scroll;overflow-x:hidden;max-height:200px;'></div>

divをdivの一番下までスクロールさせるにはどうすればよいですか？ページではなく、DIVだけです。

4

13 に答える 13

680

ここでの他の解決策は、多くのコンテンツを含む div では実際には機能しません。(div のコンテンツの高さではなく) div の高さまでスクロールして「最大化」します。そのため、内部のコンテンツに div の高さの 2 倍を超えない限り、それらは機能します。

正しいバージョンは次のとおりです。

$('#div1').scrollTop($('#div1')[0].scrollHeight);

または jQuery 1.6 以降のバージョン:

var d = $('#div1');
d.scrollTop(d.prop("scrollHeight"));

またはアニメーション：

$("#div1").animate({ scrollTop: $('#div1').prop("scrollHeight")}, 1000);
于 2012-07-18T22:40:21.170 に答える
68

現在「受け入れられている」ものを含め、ここで見ることができるすべての回答は、設定されているという点で実際には間違っています。

scrollTop = scrollHeight

一方、正しいアプローチは次のように設定することです。

scrollTop = scrollHeight - clientHeight

言い換えると：

$('#div1').scrollTop($('#div1')[0].scrollHeight - $('#div1')[0].clientHeight);

またはアニメーション：

$("#div1").animate({
  scrollTop: $('#div1')[0].scrollHeight - $('#div1')[0].clientHeight
}, 1000);
于 2014-01-25T17:35:19.243 に答える
26

更新：完全な答えについては、MikeToddのソリューションを参照してください。

$("#div1").animate({ scrollTop: $('#div1').height()}, 1000);

アニメーション化する場合（1000ミリ秒以上）。

$('#div1').scrollTop($('#div1').height())

あなたがそれを瞬時にしたいなら。

于 2012-05-08T17:44:22.883 に答える
16 
$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

これにより、ページの高さが取得され、ウィンドウが読み込まれると下にスクロールします。1000ページの準備ができたら、を必要なものに変更します。

于 2012-05-08T17:40:38.410 に答える
7

これを試して：

$('#div1').scrollTop( $('#div1').height() )
于 2012-05-08T17:41:38.007 に答える
5

ウィンドウをターゲットdivの一番下までスクロールします。

function scrollToBottom(id){
  div_height = $("#"+id).height();
  div_offset = $("#"+id).offset().top;
  window_height = $(window).height();
  $('html,body').animate({
    scrollTop: div_offset-window_height+div_height
  },'slow');
}

scrollToBottom('call_div_id');
于 2012-11-26T05:32:45.247 に答える