Scrollen Sie beim Laden der Seite zum Ende von Div (jQuery)

Ich habe ein Div auf meiner Seite:

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

Wie kann ich das Div zum Ende des Div scrollen lassen? Nicht die Seite, nur der DIV.

Die anderen Lösungen hier funktionieren nicht für Divs mit viel Inhalt - sie "maximal" scrollen bis zur Höhe des Div (anstelle der Höhe des Inhalts des Div). Sie funktionieren also, es sei denn, Sie haben mehr als die doppelte Höhe des Inhalts des Divs darin.

Hier ist die richtige Version:

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

oder jQuery 1.6+ Version:

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

Oder animiert:

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

Alle Antworten, die ich hier sehen kann, einschließlich der derzeit "akzeptierten", sind tatsächlich falsch, da sie Folgendes festlegen:

scrollTop = scrollHeight

Der richtige Ansatz besteht darin, Folgendes festzulegen:

scrollTop = scrollHeight - clientHeight

Mit anderen Worten:

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

Oder animiert:

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

UPDATE: Eine vollständige Antwort finden Sie in der Lösung von Mike Todd .

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

wenn Sie möchten, dass es animiert wird (über 1000 Millisekunden).

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

wenn du es sofort willst.

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

Dadurch wird die Höhe der Seite erfasst und nach dem Laden des Fensters nach unten gescrollt. Ändern Sie das 1000, was Sie brauchen, um es schneller / langsamer zu machen, sobald die Seite fertig ist.

Versuche dies:

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

Scrollen Sie zum unteren Rand des Zieldiv.

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

Folgendes wird funktionieren. Bitte beachten Sie [0]undscrollHeight

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

zum animieren in jquery (version> 2.0)

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

Keines davon hat bei mir funktioniert. Ich habe ein Nachrichtensystem in einer Web-App, das dem Facebook-Messenger ähnelt, und wollte, dass die Nachrichten am unteren Rand eines Divs angezeigt werden.

Dies war ein Vergnügen, einfaches Javascript.

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

Ich arbeite in einer alten Codebasis und versuche, nach Vue zu migrieren.

In meiner speziellen Situation (scrollbares Div in einem Bootstrap-Modal) zeigte ein v-if neuen Inhalt an, zu dem die Seite nach unten scrollen sollte. Damit dieses Verhalten funktioniert, musste ich warten, bis vue das erneute Rendern abgeschlossen hatte, und dann mit jQuery zum Ende des Modals scrollen.

So...

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

Sie können den folgenden Code verwenden, um beim Laden der Seite zum Ende von div zu scrollen.

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

Sie können scrollHeight und clientHeight mit scrollTop überprüfen, um zum unteren Rand des div-Codes zu scrollen.

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

Wenn die Seite geladen ist, ist der Bildlauf der Maximalwert.

Dies ist das Meldungsfeld, wenn der Benutzer eine Nachricht sendet und dann immer den neuesten Chat nach unten anzeigt, sodass der Bildlaufwert immer maximal ist.

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

siehe Bild