Gulir ke bawah Div pada pemuatan halaman (jQuery)

Saya memiliki div di halaman saya:

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

Bagaimana saya bisa membuat gulir div ke bagian bawah div ?? Bukan halaman, hanya DIV.

Solusi lain di sini tidak benar-benar bekerja untuk div dengan banyak konten - itu "maxes out" bergulir ke ketinggian div (bukan ketinggian konten div). Jadi mereka akan bekerja, kecuali jika Anda memiliki lebih dari dua kali lipat tinggi div dalam konten di dalamnya.

Ini versi yang benar:

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

atau versi jQuery 1.6+:

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

Atau animasi:

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

Semua jawaban yang bisa saya lihat di sini, termasuk yang "diterima" saat ini, sebenarnya salah karena mereka menetapkan:

scrollTop = scrollHeight

Sedangkan pendekatan yang benar adalah mengatur:

scrollTop = scrollHeight - clientHeight

Dengan kata lain:

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

Atau animasi:

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

PEMBARUAN: lihat solusi Mike Todd untuk jawaban yang lengkap.

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

jika Anda ingin dianimasikan (lebih dari 1000 milidetik).

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

jika Anda menginginkannya secara instan.

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

Ini meraih ketinggian halaman dan menggulirnya ke bawah setelah jendela dimuat. Ubah 1000untuk apa pun yang Anda perlu lakukan lebih cepat / lebih lambat setelah halaman siap.

coba ini:

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

Gulir jendela ke bagian bawah target 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');

Berikut ini akan berfungsi. Mohon diperhatikan [0]danscrollHeight

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

untuk menghidupkan dalam jquery (versi> 2.0)

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

Tidak ada yang berfungsi untuk saya, saya memiliki sistem pesan di dalam aplikasi web yang mirip dengan Facebook messenger dan ingin pesan muncul di bagian bawah div.

Ini berhasil memperlakukan, Javascript dasar.

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

Saya sedang bekerja di basis kode warisan yang mencoba bermigrasi ke Vue.

Dalam situasi spesifik saya (div yang dapat digulir yang dibungkus dengan bootstrap modal), v-if menunjukkan konten baru, yang saya ingin halaman gulir ke bawah. Agar perilaku ini berfungsi, saya harus menunggu vue selesai merender ulang, dan kemudian menggunakan jQuery untuk menggulir ke bagian bawah modal.

Begitu...

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

Anda dapat menggunakan kode di bawah ini untuk menggulir ke bawah div pada memuat halaman.

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

Anda dapat memeriksa scrollHeight dan clientHeight dengan scrollTop untuk menggulir ke bagian bawah div seperti kode di bawah ini.

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

Ketika halaman dimuat maka gulir adalah nilai maksimal.

Ini adalah kotak pesan ketika pengguna mengirim pesan maka selalu tampilkan obrolan terbaru di bawah sehingga nilai gulir selalu maksimal.

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

lihat gambar