Przewiń do dołu Div przy ładowaniu strony (jQuery)

Mam div na mojej stronie:

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

Jak mogę sprawić, aby div przewinął na dół div? Nie strona, tylko DIV.

Inne rozwiązania tutaj nie działają w rzeczywistości dla div z dużą ilością treści - „maksymalizuje” przewijanie w dół do wysokości div (zamiast wysokości zawartości div). Więc będą działać, chyba że masz w nim więcej niż dwukrotną wysokość div.

Oto poprawna wersja:

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

lub wersja jQuery 1.6+:

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

Lub animowane:

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

Wszystkie odpowiedzi, które tu widzę, w tym obecnie „zaakceptowana”, są w rzeczywistości błędne, ponieważ ustawiają:

scrollTop = scrollHeight

Prawidłowe podejście polega na ustawieniu:

scrollTop = scrollHeight - clientHeight

Innymi słowy:

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

Lub animowane:

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

AKTUALIZACJA: zobacz rozwiązanie Mike'a Todda, aby uzyskać pełną odpowiedź.

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

jeśli chcesz, aby był animowany (ponad 1000 milisekund).

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

jeśli chcesz to natychmiast.

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

Pobiera to wysokość strony i przewija ją w dół po załadowaniu okna. Zmień na 1000wszystko, czego potrzebujesz, aby zrobić to szybciej / wolniej, gdy strona będzie gotowa.

Spróbuj tego:

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

Przewiń okno do dolnej części docelowego 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');

Następujące będą działać. Uwaga [0]iscrollHeight

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

dla animacji w jquery (wersja> 2.0)

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

Żaden z nich nie działał dla mnie, mam system wiadomości wewnątrz aplikacji internetowej podobny do komunikatora Facebooka i chciałem, aby wiadomości pojawiały się na dole div.

To zadziałało, podstawowy Javascript.

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

Pracuję w starej bazie kodu, próbując przeprowadzić migrację do Vue.

W mojej konkretnej sytuacji (przewijalny div zawinięty w modal bootstrap), v-if pokazało nową zawartość, do której chciałbym przewinąć stronę w dół. Aby to zachowanie zadziałało, musiałem poczekać, aż vue zakończy ponowne renderowanie, a następnie użyj jQuery, aby przewinąć do dolnej części modalu.

Więc...

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

Możesz użyć poniższego kodu, aby przewinąć do dołu div przy ładowaniu strony.

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

Możesz sprawdzić scrollHeight i clientHeight za pomocą scrollTop, aby przewinąć do dołu div jak kod poniżej.

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

Po załadowaniu strony przewijanie ma maksymalną wartość.

To jest okno komunikatu, gdy użytkownik wysyła wiadomość, a następnie zawsze pokazuje ostatni czat w dół, aby wartość przewijania była zawsze maksymalna.

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

patrz zdjęcie