Desplácese hasta la parte inferior de Div en la carga de la página (jQuery)

Tengo un div en mi página:

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

¿Cómo puedo hacer que el div se desplace hacia la parte inferior del div? No la página, solo el DIV.

Las otras soluciones aquí en realidad no funcionan para divs con mucho contenido: "maximiza" desplazándose hacia abajo hasta la altura del div (en lugar de la altura del contenido del div). Entonces funcionarán, a menos que tenga más del doble de la altura del div en contenido dentro de él.

Aquí está la versión correcta:

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

o versión jQuery 1.6+:

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

O animado:

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

Todas las respuestas que puedo ver aquí, incluida la actualmente "aceptada", en realidad son incorrectas en el sentido de que establecen:

scrollTop = scrollHeight

Mientras que el enfoque correcto es establecer:

scrollTop = scrollHeight - clientHeight

En otras palabras:

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

O animado:

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

ACTUALIZACIÓN: vea la solución de Mike Todd para obtener una respuesta completa.

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

si quieres que esté animado (más de 1000 milisegundos).

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

si lo quieres instantáneo

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

Esto toma la altura de la página y la desplaza hacia abajo una vez que se ha cargado la ventana. Cambie 1000a lo que necesite para hacerlo más rápido / más lento una vez que la página esté lista.

prueba esto:

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

Desplácese por la ventana hasta el final del objetivo 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');

Lo siguiente funcionará. Tenga en cuenta [0]yscrollHeight

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

para animar en jquery (versión> 2.0)

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

Ninguno de estos funcionó para mí, tengo un sistema de mensajes dentro de una aplicación web que es similar a Facebook Messenger y quería que los mensajes aparecieran en la parte inferior de un div.

Esto funcionó de maravilla, Javascript básico.

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

Estoy trabajando en una base de código heredada que intenta migrar a Vue.

En mi situación específica (div desplazable envuelto en un modo de arranque), un v-if mostró contenido nuevo, al que quería que la página se desplazara hacia abajo. Para que este comportamiento funcione, tuve que esperar a que vue termine de volver a renderizar y luego usar jQuery para desplazarme hasta la parte inferior del modal.

Entonces...

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

Puede usar el siguiente código para desplazarse hasta la parte inferior del div en la carga de la página.

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

Puede verificar scrollHeight y clientHeight con scrollTop para desplazarse hasta la parte inferior del div como el código a continuación.

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

Cuando se carga la página, el desplazamiento es el valor máximo.

Este es un cuadro de mensaje cuando el usuario envía un mensaje y luego muestra el último chat hacia abajo para que el valor de desplazamiento siempre sea máximo.

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

ver imagen