ページの読み込み時にDivの一番下までスクロール（jQuery）

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

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

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

ここでの他のソリューションは、コンテンツがたくさんある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);

私がここで見ることができるすべての答えは、現在「受け入れられている」ものを含めて、実際には間違っているため、

scrollTop = scrollHeight

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

scrollTop = scrollHeight - clientHeight

言い換えると：

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

またはアニメーション：

$("#div1").animate({
  scrollTop: $('#div1')[0].scrollHeight - $('#div1')[0].clientHeight
}, 1000);

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

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

アニメーション化したい場合（1000ミリ秒以上）。

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

瞬時にしたい場合。

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

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

これを試して：

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

ウィンドウをターゲット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');

以下が機能します。注意[0]してくださいscrollHeight

$("#myDiv").animate({ scrollTop: $("#myDiv")[0].scrollHeight }, 1000);

jqueryのアニメーション（バージョン> 2.0）

var d = $('#div1');
d.animate({ scrollTop: d.prop('scrollHeight') }, 1000);

これらはどれもうまくいきませんでした。私は、Webアプリ内にFacebookメッセンジャーに似たメッセージシステムを使用しており、メッセージをdivの下部に表示したいと考えていました。

これは、扱いやすい基本的なJavaScriptで動作しました。

window.onload=function () {
     var objDiv = document.getElementById("MyDivElement");
     objDiv.scrollTop = objDiv.scrollHeight;
}

Vueに移行しようとしているレガシーコードベースで作業しています。

私の特定の状況（ブートストラップモーダルにラップされたスクロール可能なdiv）では、v-ifに新しいコンテンツが表示され、ページを下にスクロールする必要がありました。この動作を機能させるには、vueが再レンダリングを完了するのを待ってから、jQueryを使用してモーダルの下部までスクロールする必要がありました。

そう...

this.$nextTick(function() {
    $('#thing')[0].scrollTop = $('#thing')[0].scrollHeight;
})

以下のコードを使用して、ページの読み込み時にdivの一番下までスクロールできます。

$(document).ready(function(){
  $('div').scrollTop($('div').scrollHeight);
});

scrollTopでscrollHeightとclientHeightをチェックして、以下のコードのようにdivの一番下までスクロールできます。

$('#div').scroll(function (event) {
  if ((parseInt($('#div')[0].scrollHeight) - parseInt(this.clientHeight)) == parseInt($('#div').scrollTop())) 
  {
    console.log("this is scroll bottom of div");
  }
  
});

ページが読み込まれると、スクロールが最大値になります。

これは、ユーザーがメッセージを送信し、常に最新のチャットを下に表示するときのメッセージボックスです。スクロール値は常に最大になります。

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

画像を見る