Scorri fino alla fine di Div al caricamento della pagina (jQuery)

Ho un div sulla mia pagina:

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

Come posso far scorrere il div fino alla fine del div ?? Non la pagina, solo il DIV.

Le altre soluzioni qui in realtà non funzionano per i div con un sacco di contenuti: "si estendono al massimo" scorrendo verso il basso fino all'altezza del div (anziché all'altezza del contenuto del div). Quindi funzioneranno, a meno che tu non abbia più del doppio dell'altezza del div nel contenuto al suo interno.

Ecco la versione corretta:

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

o jQuery 1.6+ versione:

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

O animato:

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

Tutte le risposte che posso vedere qui, inclusa quella attualmente "accettata", sono in realtà errate in quanto impostano:

scrollTop = scrollHeight

Considerando che l'approccio corretto è quello di impostare:

scrollTop = scrollHeight - clientHeight

In altre parole:

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

O animato:

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

AGGIORNAMENTO: vedi la soluzione di Mike Todd per una risposta completa.

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

se vuoi che sia animato (oltre 1000 millisecondi).

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

se lo vuoi istantaneo.

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

Questo afferra l'altezza della pagina e la fa scorrere verso il basso una volta caricata la finestra. Cambia 1000in quello che ti serve per farlo più velocemente / più lentamente una volta che la pagina è pronta.

prova questo:

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

Scorri la finestra fino alla fine del div target.

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

Di seguito funzionerà. Si prega di notare [0]escrollHeight

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

per animate in jquery (versione> 2.0)

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

Nessuno di questi ha funzionato per me, ho un sistema di messaggi all'interno di un'app Web simile a Facebook Messenger e volevo che i messaggi comparissero in fondo a un div.

Questo ha funzionato a meraviglia, Javascript di base.

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

Sto lavorando in una base di codice legacy cercando di migrare su Vue.

Nella mia situazione specifica (div scorrevole in un bootstrap modale), un v-if mostrava nuovi contenuti, a cui volevo che la pagina scorresse verso il basso. Per far funzionare questo comportamento, ho dovuto attendere che Vue finisse di eseguire nuovamente il rendering, quindi utilizzare jQuery per scorrere fino alla fine del modale.

Così...

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

È possibile utilizzare il codice seguente per scorrere fino alla fine del div al caricamento della pagina.

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

Puoi controllare scrollHeight e clientHeight con scrollTop per scorrere fino alla fine del div come il codice qui sotto.

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

Quando la pagina viene caricata, scorrere è il valore massimo.

Questa è una finestra di messaggio quando l'utente invia un messaggio, quindi mostra sempre l'ultima chat in basso in modo che il valore di scorrimento sia sempre massimo.

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

vedi immagine