Desplácese automáticamente hasta la parte inferior de la página
Tengo una lista de preguntas. Cuando hago clic en la primera pregunta, debería llevarme automáticamente a un elemento específico en la parte inferior de la página.
¿Cómo puedo hacer esto con jQuery?
jQuery no es necesario. La mayoría de los resultados principales que obtuve de una búsqueda en Google me dieron esta respuesta:
window.scrollTo(0, document.body.scrollHeight);
Cuando tenga elementos anidados, es posible que el documento no se desplace. En este caso , debe apuntar al elemento que se desplaza y utilizar su altura de desplazamiento.
nestedElement.scrollTo(0, nestedElement.scrollHeight);
Algunas fuentes adicionales que puedes consultar:
- http://www.alecjacobson.com/weblog/?p=753
- http://www.mediacollege.com/internet/javascript/page/scroll.html
- http://www.electrictoolbox.com/jquery-scroll-bottom/
Para desplazar toda la página hasta el final:
const scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;
Puedes ver la demostración aquí.
Para desplazar un elemento específico hasta el final:
const scrollToBottom = (id) => {
const element = document.getElementById(id);
element.scrollTop = element.scrollHeight;
}
Aquí está la demostración
Y así es como funciona:
Ref: desplazamiento superior , altura de desplazamiento , altura del cliente
ACTUALIZACIÓN: Las últimas versiones de Chrome (61+) y Firefox no admiten el desplazamiento del cuerpo, consulte: https://dev.opera.com/articles/fixing-the-scrolltop-bug/
Implementación de vainilla JS:
element.scrollIntoView(false);
https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView
Puede usar esto para bajar la página en formato de animación.
$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");
un delineador para suavizar el desplazamiento hacia la parte inferior
window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" });
Para desplazarse hacia arriba simplemente configúrelo topen0
