down - scroll end jquery

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

Question

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 a la parte inferior del div? No la página, solo el DIV.

Answer 1

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

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

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

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

Si lo quieres instantáneo.

Answer 2

Desplazar la ventana a la parte inferior del div objetivo.

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

Answer 3

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

En mi situación específica (div enrollable envuelto en un modo de rutina de carga), un v-if mostró nuevo contenido, que quería que la página se desplace hacia abajo. Para que este comportamiento funcionara, tuve que esperar a que vue terminara de volver a renderizar y luego usar jQuery para desplazarse hasta el final del modal.

Asi que...

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

Answer 4

Las otras soluciones aquí en realidad no funcionan para divs con mucho contenido, sino que se "desplazan" hacia abajo hasta la altura del div (en lugar de la altura del contenido del div). Así que funcionarán, a menos que tengas más del doble de la altura del contenido de div en su interior.

Aquí está la versión correcta:

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

o jQuery 1.6+ version:

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

O animado:

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

Answer 5

Lo siguiente funcionará. Tenga en cuenta [0] y scrollHeight

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

Answer 6

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ó a gusto, Javascript básico.

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

Answer 7

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

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

Answer 8

Todas las respuestas que puedo ver aquí, incluida la que está actualmente "aceptada", son realmente erróneas 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);

Answer 9

para animate en jquery (version> 2.0)

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

Answer 10

prueba esto:

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

Answer 11

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

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