HOWTO · JavaScript
JavaScript Scroll to Top of Div
JavaScript-Scroll-Verhalten hilft beim einfachen Durchlaufen der Inhalte einer Webseite. scrollIntoView() und scrollTo() sind umfassend und erfordern eine minimale Codezeile, um die Aufgabe zu erfüllen.
Auf dieser Seite
Um ein div in den sichtbaren Bereich zu bringen, rufen Sie scrollIntoView() für dieses Element auf. Um das Seitenfenster zu bestimmten Koordinaten zu bewegen, verwenden Sie window.scrollTo(). Soll der Inhalt innerhalb eines scrollbaren div an den Anfang zurückkehren, setzen Sie scrollTop dieses Elements auf 0. Entscheidend ist, welcher Scrollbereich bewegt werden soll. Ist das Ziel bekannt und über einen Link erreichbar, kann ein regulärer Anker innerhalb der Seite einfacher sein. JavaScript eignet sich, wenn das Scrollen durch eine Aktion oder andere Logik ausgelöst werden soll.
Mit der Methode scrollIntoView() in JavaScript zum Anfang eines div scrollen
Wählen Sie das Zielelement aus und rufen Sie scrollIntoView() mit block: 'start' auf. Dadurch wird die obere Kante des Elements am Anfang seines Scrollcontainers ausgerichtet. Der Browser kann die Seite oder einen verschachtelten Scrollcontainer bewegen, damit das Ziel sichtbar wird. Das Beispiel ist ein vollständiger Quelltext für eine Browserseite; der Runtime-Koordinator führt ihn nicht aus.
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Bring a section into view</title>
<style>
body { min-height: 140vh; }
#target { margin-top: 100vh; }
</style>
<button id="show-target" type="button">Show target</button>
<div id="target">Target section</div>
<script>
document.querySelector('#show-target').addEventListener('click', () => {
document.querySelector('#target').scrollIntoView({
behavior: 'smooth',
block: 'start'
});
});
</script>
</html>
Der Handler des Buttons wählt das Zielelement aus und weist den Browser an, es mit einer weichen Bewegung nahe am oberen Rand auszurichten. Befindet sich das Ziel innerhalb eines scrollbaren übergeordneten Elements, kann auch dieser Container bewegt werden. Entfernen Sie behavior: 'smooth', wenn die Bewegung unmittelbar erfolgen soll.
Mit der Methode scrollTo() das Seitenfenster in JavaScript zum Anfang bewegen
window.scrollTo() bewegt das Seitenfenster zu Dokumentkoordinaten; window.scrollTo(0, 0) setzt die Seite auf den Dokumentursprung zurück. Soll ein Zielelement am oberen Rand des sichtbaren Bereichs erscheinen, berechnen Sie seine aktuelle Position im Dokument mithilfe von getBoundingClientRect() und dem vertikalen Seitenversatz. Damit wird das Scrollen der Seite gesteuert, nicht die Position des Inhalts innerhalb eines scrollbaren div.
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Align a section with the viewport</title>
<style>
body { min-height: 180vh; }
#target { margin-top: 120vh; }
</style>
<button id="show-target" type="button">Show target</button>
<div id="target">Target section</div>
<script>
document.querySelector('#show-target').addEventListener('click', () => {
const target = document.querySelector('#target');
const documentTop = target.getBoundingClientRect().top + window.scrollY;
window.scrollTo({ top: documentTop, behavior: 'smooth' });
});
</script>
</html>
Die Koordinate wird beim Klicken auf den Button berechnet und entspricht daher der aktuellen Position des Ziels im Dokument. Soll das Element lediglich sichtbar werden, ist scrollIntoView() meist direkter.
Mit der Eigenschaft scrollTop den Inhalt eines div in JavaScript an den Anfang scrollen
Verwenden Sie scrollTop, wenn der Inhalt des div selbst vertikal überläuft. Wird der Wert auf 0 gesetzt, kehrt dieser Inhalt an seinen Anfang zurück; das Seitenfenster wird dadurch nicht bewegt. Das folgende JavaScript-Beispiel veranschaulicht die Zuweisung. Ein kleines Objekt zeigt die Änderung der Eigenschaft; das anschließende Beispiel für eine Browserseite wendet sie auf ein tatsächliches Element an.
Führen Sie dieses Beispiel aus:
const pane = { scrollTop: 48 };
pane.scrollTop = 0;
console.log(pane.scrollTop);
Dieser Quelltext für eine Browserseite weist dem div eine feste Höhe und mehr Inhalt als diese Höhe zu. Deshalb kann sich seine eigene vertikale Bildlaufleiste bewegen.
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Reset a scrollable div</title>
<style>
#pane { height: 8rem; overflow-y: auto; border: 1px solid; }
#content { height: 30rem; padding: 1rem; }
</style>
<button id="reset" type="button">Return panel to top</button>
<div id="pane"><div id="content">Scrollable panel content</div></div>
<script>
document.querySelector('#reset').addEventListener('click', () => {
document.querySelector('#pane').scrollTop = 0;
});
</script>
</html>
Verwenden Sie scrollTop des Panels, um dessen internen Inhalt zu bewegen. Hat das Panel keinen überlaufenden Inhalt, gibt es keinen Inhaltsbereich, durch den gescrollt werden könnte.
Fazit
Verwenden Sie scrollIntoView(), um ein Zielelement in den sichtbaren Bereich zu bringen, window.scrollTo(), um die Dokumentkoordinaten des Seitenfensters festzulegen, und scrollTop, um den Inhalt innerhalb eines scrollbaren Elements zu bewegen. Die Methoden steuern unterschiedliche Scrollbereiche. Wählen Sie deshalb die Methode, mit der genau der Bereich an den Anfang zurückkehrt, den Sie bewegen möchten.
