Automatisch zum Ende der Seite blättern

Question

Ich habe eine Liste von Fragen. Wenn ich auf die erste Frage klicke, sollte sie mich automatisch zu einem bestimmten Element am unteren Rand der Seite führen.

Wie kann ich dies mit jQuery tun?

Answer 1

JQuery ist nicht notwendig. Die meisten der Top-Ergebnisse, die ich bei einer Google-Suche erhielt, gaben mir diese Antwort:

window.scrollTo(0, document.body.scrollHeight);

Bei verschachtelten Elementen wird das Dokument möglicherweise nicht geblättert. In diesem Fall müssen Sie auf das Element abzielen, das sich verschiebt, und stattdessen seine Bildlaufhöhe verwenden.

nestedElement.scrollTo(0, nestedElement.scrollHeight);

Einige zusätzliche Quellen, die Sie sich ansehen können:

• http://www.alecjacobson.com/weblog/?p=753
• http://www.mediacollege.com/internet/javascript/page/scroll.html
• http://www.electrictoolbox.com/jquery-scroll-bottom/

Answer 2

Um die gesamte Seite nach unten zu blättern:

const scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;

Sie können sich die Demo ansehen aquí

Um ein bestimmtes Element nach unten zu verschieben:

const scrollToBottom = (id) => {
    const element = document.getElementById(id);
    element.scrollTop = element.scrollHeight;
}

Voici le Demo

Und so funktioniert es:

Ref: scrollTop , scrollHeight , clientHeight

UPDATE: Die neuesten Versionen von Chrome (61+) und Firefox unterstützen das Scrollen des Körpers nicht, siehe: https://dev.opera.com/articles/fixing-the-scrolltop-bug/

Answer 3

Vanilla JS-Implementierung:

element.scrollIntoView(false);

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

Answer 4

Damit können Sie die Seite in einem Animationsformat ablaufen lassen.

$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");

Answer 5

One-Liner, um das Scrollen nach unten zu erleichtern

window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" });

Um nach oben zu scrollen, setzen Sie einfach top a 0