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

So viele Antworten, die versuchen, die Höhe des Dokuments zu berechnen. Aber bei mir wurde es nicht richtig berechnet. Diese beiden Antworten haben jedoch funktioniert:

jquery

    $('html,body').animate({scrollTop: 9999});

oder nur js

    window.scrollTo(0,9999);

Answer 2

Hier ist eine Methode, die bei mir funktioniert hat:

Erwartetes Ergebnis:

• Keine Bildlaufanimation
• Lädt beim ersten Laden am Ende der Seite
• Wird bei allen Aktualisierungen am unteren Rand der Seite geladen

Code:

<script>
    function scrollToBottom() {
        window.scrollTo(0, document.body.scrollHeight);
    }
    history.scrollRestoration = "manual";
    window.onload = scrollToBottom;
</script>

Warum dies im Vergleich zu anderen Methoden funktionieren kann:

Browser wie Chrome haben eine eingebaute Voreinstellung, die sich nach dem Aktualisieren der Seite merkt, wo man sich befand. Nur ein window.onload funktioniert nicht, weil Ihr Browser Sie automatisch an die Stelle zurückblättern lässt, an der Sie vor der Aktualisierung waren, NACHDEM Sie eine Zeile wie diese aufgerufen haben:

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

Deshalb müssen wir hinzufügen:

history.scrollRestoration = "manual";

vor dem window.onload um diese integrierte Funktion zuerst zu deaktivieren.

Referenzen:

Dokumentation für window.onload : https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

Dokumentation für window.scrollTo : https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

Dokumentation für history.scrollRestoration : https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration

Answer 3

Ein einfacher Weg, wenn Sie zu einem bestimmten Element nach unten blättern möchten.

Rufen Sie diese Funktion immer dann auf, wenn Sie nach unten blättern wollen.

function scrollDown() {
 document.getElementById('scroll').scrollTop =  document.getElementById('scroll').scrollHeight
}

ul{
 height: 100px;
 width: 200px;
 overflow-y: scroll;
 border: 1px solid #000;
}

<ul id='scroll'>
<li>Top Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Bottom Here</li>
<li style="color: red">Bottom Here</li>
</ul>

<br />

<button onclick='scrollDown()'>Scroll Down</button>

Answer 4

Sie können jede id zum Referenzattribut href des Link-Elements:

<a href="#myLink" id="myLink">
    Click me
</a>

In dem obigen Beispiel klickt der Benutzer auf Click me am unteren Ende der Seite, die Navigation führt zu Click me selbst.

Answer 5

Wenn sich eine ID in einem beliebigen Tag an oder in der Nähe der Stelle befindet, zu der geblättert werden soll, ist nur eine Zeile JavaScript erforderlich, die die Funktion scrollIntoView verwendet. Nehmen wir zum Beispiel an, das betreffende Element ist ein DIV mit der ID "mydiv1".

<div id="mydiv1">[your contents]</div>

dann würden Sie den JavaScript-Befehl ausführen

document.getElementById("mydiv1").scrollIntoView();

Es ist überhaupt kein JQuery erforderlich. Hoffentlich hilft das.