jQuery Desplazarse al final de la página

196

Después de que mi página haya terminado de cargarse. Quiero que jQUery se desplace bien hasta la parte inferior de la página, animando rápidamente, no un chasquido / sacudida.

¿Necesito un complemento similar ScrollTopara eso? ¿o está eso integrado en jQuery de alguna manera?

jquery jquery-plugins Un aprendiz
fuente

Respuestas:

416

Puede animar para desplazarse hacia abajo en la página animando la scrollToppropiedad, no se requiere un complemento, como este:

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

Tenga en cuenta el uso de window.onload(cuando se cargan imágenes ... que ocupan altura) en lugar dedocument.ready .

Para ser técnicamente correcto, debe restar la altura de la ventana, pero lo anterior funciona:

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

Para desplazarse a una ID en particular, use su .scrollTop(), así:

$("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000);
Nick Craver
fuente
2
Otro problema es cuando parece hecho, y luego el usuario intenta desplazarse hacia arriba, por un momento está bloqueado y produce un efecto muy perturbador, evitando que el usuario se desplace hacia arriba
AnApprentice
1
@AnApprentice: eso se debe a que ocurre rápidamente (400 ms por defecto), recomendaría solo un desplazamiento rápido para aliviar ese problema.
Nick Craver
3
El bloqueo se debe a que la distancia está desactivada. Está animando más allá de la animación visible.
Josiah Ruddell
27
@NickCraver: con la última versión de jQuery .scrollTop () parece no funcionar para desplazarse a una ID en particular; with .offset (). top debería funcionar: $("html, body").animate({ scrollTop: $("#myID").offset().top }, 1000);
Paolo Gibellini
3
Esta respuesta necesita ser editada. $(document).height()es un valor demasiado grande para la scrollToppropiedad, puede notarlo con la relajación. Creo que $(document).height() - window.innerHeightdebería estar bien.
silvenon
22

algo como esto:

var $target = $('html,body'); 
$target.animate({scrollTop: $target.height()}, 1000);
Josiah Ruddell
fuente
Intenté actualizar el destino a .write-comment y no funcionó. ¿Tal vez porque eso se inyecta en la página?
aprendiz el
16 
$('html,body').animate({ scrollTop: 9999 }, 'slow');

Tan simple como esto, 9999 páginas de altura ... gran rango para que pueda llegar al fondo.

Alin Razvan
fuente
1
Esto no es perfecto, ya que en algunos casos, incluso si es raro, puede haber páginas más largas que eso, especialmente páginas que cargan dinámicamente contenido ilimitado. Esto detendrá el desplazamiento a mitad de camino.
Akhil Gupta
13

Puedes probar esto 

var scroll=$('#scroll');
scroll.animate({scrollTop: scroll.prop("scrollHeight")});
Sarath Ak
fuente
10 
$("div").scrollTop(1000);

Funciona para mi. Se desplaza hacia abajo.

f123
fuente
13
No, si su página tiene más de 1000 px.
Volomike
4

Los guiones mencionados en respuestas anteriores, como:

$("body, html").animate({
    scrollTop: $(document).height()
}, 400)

no funcionará en Chrome y estará nervioso en Safari en caso de que la html etiqueta en CSS tenga una overflow: auto;propiedad establecida. Me llevó casi una hora darme cuenta.

Ilia Rostovtsev
fuente
3

Usando 'document.body.clientHeight' puede obtener la altura vista de los elementos del cuerpo 

$('html, body').animate({
    scrollTop: $("#particularDivision").offset().top - document.body.clientHeight + $("#particularDivision").height()
}, 1000);

esto se desplaza en la identificación 'particularDivision'

Anbu
fuente
1

Para jQuery 3, cambie

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

a:

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

Adnan Tahir
fuente
1 
function scrollToBottom() {
     $("#mContainer").animate({ scrollTop: $("#mContainer")[0].scrollHeight }, 1000);
}

Esta es la solución de mi trabajo y usted encuentra, estoy seguro

Roshan Madusanka
fuente
0

js

var el = document.getElementById("el");
el.scrollTop = el.scrollHeight - el.scrollTop;
codeskyblue
fuente
Aunque este código puede ayudar a resolver el problema, no explica por qué y / o cómo responde la pregunta. Proporcionar este contexto adicional mejoraría significativamente su valor educativo a largo plazo. Por favor, editar su respuesta para agregar explicación, incluyendo lo que se aplican limitaciones y supuestos.
Toby Speight
0 
$('#pagedwn').bind("click", function () {
        $('html, body').animate({ scrollTop:3031 },"fast");
        return false;
});

Esta solución funcionó para mí. Está funcionando en Desplazamiento de página rápidamente.

vikram venkatesh
fuente
0 
var pixelFromTop = 500;     
$('html, body').animate({ scrollTop: pixelFromTop  }, 1);

Entonces, cuando se abre la página, se desplaza automáticamente hacia abajo después de 1 milisegundo

WapShivam
fuente