Sayfa yüklendiğinde Div'in en altına gidin (jQuery)

Sayfamda bir div var:

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

Div'in alt kısmına nasıl div kaydırma yapabilirim? Sayfa değil, sadece DIV.

Buradaki diğer çözümler aslında çok fazla içeriğe sahip div'ler için işe yaramıyor - div'ın yüksekliğine (div içeriğinin yüksekliği yerine) aşağı doğru "maksimum çıkıyor" . Div'in içindeki içeriğin iki katından fazla olmadığı sürece çalışırlar.

İşte doğru sürüm:

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

veya jQuery 1.6+ sürümü:

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

Veya animasyonlu:

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

Şu anda "kabul edilen" olanlar da dahil olmak üzere burada görebildiğim tüm cevaplar, ayarladıkları için aslında yanlış:

scrollTop = scrollHeight

Oysa doğru yaklaşım şu şekildedir:

scrollTop = scrollHeight - clientHeight

Diğer bir deyişle:

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

Veya animasyonlu:

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

GÜNCELLEME: Eksiksiz bir cevap için Mike Todd'un çözümüne bakın.

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

animasyonlu olmasını istiyorsanız (1000 milisaniyeden fazla).

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

eğer anlık istiyorsanız.

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

Bu, sayfanın yüksekliğini tutar ve pencere yüklendikten sonra sayfayı aşağı kaydırır. 1000Sayfa hazır olduğunda daha hızlı / daha yavaş yapmak için gerekeni değiştirin .

bunu dene:

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

Pencereyi hedef div'in altına kaydırın.

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

Aşağıdakiler işe yarayacaktır. Lütfen dikkat [0]vescrollHeight

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

jquery'de animasyon için (sürüm> 2.0)

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

Bunların hiçbiri benim için işe yaramadı, bir web uygulamasının içinde Facebook messenger'a benzer bir mesaj sistemim var ve mesajların bir div'in altında görünmesini istiyordum.

Bu bir tedavi, temel Javascript çalıştı.

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

Vue'ya geçmeye çalışan eski bir kod tabanında çalışıyorum.

Özel durumumda (bir bootstrap modalında kaydırılan kaydırılabilir div), v-if yeni içerik gösterdi, sayfanın aşağı kaydırmasını istedim. Bu davranışın çalışmasını sağlamak için, vue'nun yeniden oluşturma işlemini bitirmesini beklemek zorunda kaldım ve daha sonra modalın altına kaydırmak için jQuery kullanmalıydım.

Yani...

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

Sayfa yüklemesinde div'in altına gitmek için aşağıdaki kodu kullanabilirsiniz.

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

Aşağıdaki div benzeri kodun en altına gitmek için scrollHeight ve clientHeight'ı scrollTop ile kontrol edebilirsiniz.

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

Sayfa yüklendiğinde kaydırma maksimum değerdir.

Bu, kullanıcı mesaj gönderdiğinde ve kaydırma değerinin her zaman maksimum olması için en son sohbeti her zaman aşağıda gösterdiği mesaj kutusudur.

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

resme bak