Zum Seitenanfang in JavaScript blättern
-
Scrollen Sie mit der Vanilla JS-Methode
window.scrollTo()in JavaScript zum Anfang einer Seite -
Scrollen Sie mit einem animierten Vanilla JS zum Seitenanfang - Neue Form der
window.scrollTo()-Methode -
Scrollen Sie mit der jQuery-Methode
scrollTop()zum Anfang einer Seite -
Scrollen Sie zum Seitenanfang, indem Sie mit der jQuery-Methode
animate()animieren
Es ist entscheidend, ein UI-Element für lange Webseiten zu haben, damit Benutzer zum Anfang des Seiten-JavaScripts scrollen können. In diesem Tutorial finden Sie mehrere JavaScript-Methoden, um nach oben zu scrollen.
Wir werden die Vanilla-JavaScript-Methode scrollTo verwenden. Wir zeigen auch, wie man die jQuery-Methode scrollTop() und die Eigenschaft scrollTop verwendet, um nach oben zu scrollen (lesen Sie weiter, um die Vorteile der Verwendung von jQuery herauszufinden).
Wir werden auch Bonustricks geben: eine clevere einzeilige reine HTML-Verknüpfung und eine benutzerdefinierte Vanilla-JS-Animation, um zum Anfang einer Seite zu scrollen.
Scrollen Sie mit der Vanilla JS-Methode window.scrollTo() in JavaScript zum Anfang einer Seite
Sie können die Vanilla-JS-Methode window.scrollTo() verwenden, um in JavaScript zum Anfang der Seite zu scrollen. Mit der Methode window.scrollTo() können wir zu jedem angegebenen Satz von x- und y-Koordinaten im Dokument scrollen.
Die alte Form dieser Methode funktioniert wie folgt:
window.scrollTo(x - coordinate, y - coordinate);
Wir können es verwenden, um in JavaScript zum Anfang einer Seite zu scrollen, indem wir (0,0) als Argumente für die Koordinaten übergeben.
let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
window.scrollTo(0, 0);
});
(Bitte sehen Sie sich die beigefügten HTML- und CSS-Dateien an, um dem Code leicht zu folgen.)
Sie können die Demo dieses Codes unten sehen:
Scrollen Sie mit einem animierten Vanilla JS zum Seitenanfang - Neue Form der window.scrollTo()-Methode
Die oben genannten Lösungen erledigen die Arbeit, aber sie sorgen nicht für eine gute UX.
Die Methode window.scrollTo() hat auch eine neue Form, mit der wir die Scrollbewegung animieren können. Mit diesem netten kleinen animierten Effekt können Sie die UX- und User-Engagement-Metriken verbessern.
Das neue Formular funktioniert wie folgt:
window.scrollTo(options)
// options is a JSON objectwith
// top: the y-coordinate to scroll to
// left : the x-coordinate to scroll to
// behavior : an animated effect with vrious string values like 'smooth',
// 'slow' etc.
Mit dieser Form dieser Methode können wir das Scrollen zum Anfang der Seite mit Vanille-JavaScript animieren.
let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
window.scrollTo({top: 0, behavior: 'smooth'});
});
(Bitte beachten Sie zum besseren Verständnis die beigefügten HTML- und CSS-Dateien.)
Der Code ist einfach. Wir haben einen Ereignis-Listener an eine Schaltfläche angehängt, um die Scroll-Top-Funktion auszulösen.
Der Callback implementiert die Methode window.scrollTo() in ihrer neuen Form. Wir haben top:0 übergeben, um nach oben zu scrollen, und wir haben behavior: 'smooth' übergeben, um einen schönen, gleichmäßigen Animationseffekt zu erzielen.
Sie können die funktionierende Demo hier sehen:
Lesen Sie hier ausführlich über die Vanilla-JS-Methode window.scrollTo().
Scrollen Sie mit der jQuery-Methode scrollTop() zum Anfang einer Seite
Sie können auch mit der jQuery-Methode scrollTop() zum Anfang einer Seite scrollen.
$("#top").on("click",function(){
$(window).scrollTop(0);
});
Die Logik ist einfach. Wir haben einen Event-Handler angehängt, um das Ereignis click auf unserer Schaltfläche Scroll to the Top abzuhören.
Der Callback hat die Methode $(window).scrollTop(0) ausgeführt und zum Anfang der Seite gescrollt, weil wir 0 als Argument übergeben haben.
Sie können die funktionierende Demo hier sehen:
Scrollen Sie zum Seitenanfang, indem Sie mit der jQuery-Methode animate() animieren
Wie bei der obigen Vanilla-JS-Lösung können wir das Scrollen zum Anfang der Seite mit jQuery animieren, um die UX zu verbessern.
$("#top").on("click",function(){
$([document.documentElement,document.body]).animate({
scrollTop:0
},1000)
});
Lassen Sie uns hier in die Logik eintauchen.
Der Callback zum Event-Listener hat zuerst das document.documentElement (das Wurzelelement) oder den document.body ausgewählt. Wir müssen beide auswählen, um die browserübergreifende Kompatibilität sicherzustellen.
(Hinweis: Dies ist einer der Gründe, warum wir jQuery verwenden. Dazu später mehr.)
Wir haben dann die animate()-Methode auf unserem ausgewählten Objekt ausgeführt und die scrollTop-Eigenschaft geändert, um einen 0-Wert (den Seitenanfang) zu erreichen.
Schließlich übergeben wir die Animationsdauer als zweites Argument an den Callback. Wir haben hier 1000 Millisekunden überschritten, aber Sie können eine beliebige Zeitspanne wählen.
Hier ist die Arbeitsausgabe dieser Methode:
Profi-Tipp: Wir verwenden jQuery, um eine bessere Cross-Browser-Kompatibilität zu gewährleisten. Manchmal kann die Benutzeroberfläche in verschiedenen Browsern seltsam gerendert werden, und die Fehlerbehebung kann schwierig sein.
Da es sich bei jQuery um eine professionelle Front-End-Bibliothek handelt, hat es den Vorteil, dass es solche browserübergreifenden Inkompatibilitätsprobleme ausbügelt. Wenn also Ihre Vanilla-JS-Lösungen in einigen Browsern kaputt gehen, können Sie stattdessen die jQuery-Version der Methode verwenden.
Einzeiliger, cleverer, reiner HTML-Scroll zum Seitenanfang Hack
Sie können auch mit einem einzeiligen HTML-Hack zum Anfang der Seite (ohne Animation) scrollen.
<div>
<a href="#">To Top</a>
</div>
Hier ist die Demo der Ausgabe.
Verwenden Sie die alte scrollTop-Eigenschaft, um zum Anfang der Seite zu scrollen
Einige Browser haben Probleme mit der Vanilla-JS-Methode scrollTo(), die wir oben verwendet haben. Viele Benutzer berichten beispielsweise, dass MS Edge mit dieser Methode nicht immer gut funktioniert.
Sie können also stattdessen den älteren Weg mit der Eigenschaft scrollTop verwenden. Die Eigenschaft scrollTop legt fest, in welchen Pixeln ein Element vertikal gescrollt werden soll.
Ein Sonderfall dieser Eigenschaft ist jedoch, wenn Sie sie auf das Stamm- oder html-Element anwenden, verschiebt sie das gesamte Dokument.
Lesen Sie hier ausführlich über die Eigenschaft scrollTop.
Mit dieser Eigenschaft können wir zum Anfang einer Seite scrollen.
let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
document.getElementsByTagName('html')[0].scrollTop = 0;
});
Der Code ist einfach. Der Callback hat das Element html ausgewählt und seine Eigenschaft scrollTop auf 0 gesetzt.
Sie können die funktionierende Demo unten sehen:
Benutzerdefiniertes Scrollen zum Anfang der Seite mit JavaScript-Animationsskript
Schließlich haben wir ein nettes kleines Skript, mit dem Sie Ihre benutzerdefinierte Scroll-to-Top-JavaScript-Animation entwickeln können. Wir verwenden die Funktionen setInteval() und clearInterval(), um den Animationseffekt auszuführen.
let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
let customAnimScroll = window.setInterval(function() {
let topOffset = window.pageYOffset;
if (topOffset > 0) {
window.scrollTo({top: topOffset - 20});
} else {
clearInterval(customAnimScroll);
}
}, 20);
});
Lassen Sie uns hier die Logik aufschlüsseln.
Wir haben eine setInterval()-Funktion auf dem window-Objekt innerhalb des Callbacks zum Event-Handler auf der Scroll-to-top-Schaltfläche ausgeführt. Die Funktion setInterval hat den von uns übergebenen Callback nach einer bestimmten Dauer wiederholt ausgeführt.
Es hat auch eine ID zurückgegeben, die wir gespeichert haben, um diese bestimmte Instanz der setInterval()-Methode zu starten/stoppen/modifizieren. Also haben wir die Methode setInterval() ausgeführt und ihre ID in der Variablen customAnimScroll gespeichert.
Der Rückruf an die Funktion setInterval() speicherte den Wert pageYOffset des window-Objekts in der Variablen topOffset. Dieser Wert ist die Anzahl der Pixel, um die das Fenster-Objekt nach unten gescrollt wird.
Abschließend haben wir überprüft, ob der Wert topOffset grösser als 0 ist (was bedeutet, dass das Fenster um einige Pixel nach unten gescrollt wird). Wenn ja, verschieben wir das Fenster mit der oben gezeigten scrollTo-Methode in seiner neuen Form um 20 Pixel nach oben.
Hier haben wir uns entschieden, für jeden Zyklus 20 Pixel nach oben zu verschieben, aber Sie können jede andere Zahl wählen.
Wenn der topOffset-Wert nicht grösser als 0 ist, haben wir an den Anfang des Fensters gescrollt. In diesem Fall haben wir die Funktion setInterval() beendet, indem wir ihre zuvor in der Variablen customAnimScroll gespeicherte ID an die Methode clearInterval() übergeben haben.
Sie können die funktionierende Demo hier sehen:
