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

Tengo un div en mi página:

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

Las otras soluciones aquí en realidad no funcionan para divs con mucho contenido: se “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 tengas 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 jQuery 1.6+ versión:

 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 están equivocadas porque 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. Cambia el 1000 a lo que necesites 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 la parte inferior del div de destino.

 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] y scrollHeight

 $("#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 aparezcan en la parte inferior de un div.

Esto funcionó como un regalo, 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), una v-si mostraba contenido nuevo, que quería que la página desplazara hacia abajo. Para que funcione este comportamiento, tuve que esperar a que vue terminara de volver a renderizar, y luego uso jQuery para desplazarme hasta la parte inferior del modal.

Asi que…

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

Puede usar el código a continuación para desplazarse a la parte inferior de div en la carga de la página.

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