0 7731

jQuery Tutorial – Scroll to Top Button – Browser an den Anfang der Seite scrollen

jQuery Tutorial Jumptop Button – Per Klick auf einen Button an den Seitenanfang springen
jQuery Tutorial Scrolltop Button – Per Klick auf einen Button an den Seitenanfang scrollen
jQuery Tutorial Scrolltop Button – Live Code Beispiel

Heute möchte ich Euch zeigen, wie man einen Scroll to Top Button realisieren kann.

Das ganze ist relativ einfach:

Ich werde Euch nun zwei Möglichkeiten zeigen, wie Ihr per Klick auf ein HTML Element Euren Browser dazu bewegt, an den Anfang der Seite zu springen.

Per Klick auf einen Button an den Seitenanfang springen

Wir geben einem oder mehreren Elementen die Klasse scrolltotop. Das kann ein Div, Span, Img was auch immer sein.

Unser jQuery-Script sähe dann folgendermaßen aus:

Beispielcode CSS:


<pre>
jQuery('.scrolltop').on('click', function() {
$('html, body').scrollTop(0);
});
</pre>

Wir müssen noch sicherstellen, dass der Dom geladen ist, bevor wir das jQuery abfeuern: Deshalb bauen wir um den Code noch eine function.

Beispielcode CSS:


<pre>
$(function() {
jQuery('.scrolltop').on('click', function() {
$('html, body').scrollTop(0);
});
};
</pre>

Mit body können wir in fast allen modernen Browsern an den Anfang der Seite springen. Wenn wir html noch mit hinzufügen schaffen wir das auch in alten Browsern bspw. IE < 8. Das ganze sieht allerdings nicht so wirklich schön aus.

Per Klick auf einen Button an den Seitenanfang scrollen

Wir sind zwar jetzt am Anfang der Seite, aber mir persönlich fehlt da noch was… eigentlich möchte ich, dass die Seite sanft nach oben scrollt und nicht einfach springt.

Hierzu verwenden wir jetzt eine ganz andere jQuery Methode: animate

Der Code sähe dann folgendermaßen aus:
Beispielcode CSS:


<pre>
$(function() {
jQuery('.scrolltop').on('click', function() {
$('html,body').animate({
scrollTop: 0
}, 1000);
});
});
</pre>

Die 1000 ist die Dauer der Scrollanimation. Geben wir weniger ein, wird die Animation schneller, geben wir mehr ein, wird sie langsamer.

jQuery Tutorial Scrolltop Button – Live Code Beispiel

Schaut Euch mein Beispiel Codepen an: Hier gibt es zwei Buttons, die einem den Sprung nach oben ermöglichen. Bei dem linken wird langsam gescrollt.
Bei dem rechten wird direkt nach oben gesprungen.

Befindet man sich oben sind die Buttons beide ausgeblendet.

See the Pen Scrolltop Buttons Tutorial by Andreas Lang (@sphinxflash) on CodePen.

Author: Andreas Lang

Sphinx-Flashdesign.de

Andreas Lang hat im Alter von 12 Jahren begonnen, auf einem Atari ST 1040 STFM in Omikron und STOS Basic zu programmieren.
Spiele interessierten ihn nicht so sehr.
Die Welt der Bits und Bytes hat ihn gefangen.
Programmierertechnisch folgten auf dem ersten 486er Turbo Pascal, Visual Basic.
Mit dem ersten Internet Anschluss per 56k Modem folgten HTML, Javascript, CSS und Macromedia Flash. Die Website www.wizzquiz.de wurde geboren.
Eine Flash Online-Gaming Plattform mit Quiz Spielen, Memory, Sokoban etc.
Später entwickelte er Software unter anderem für Continentale und Siemens AG.
Seit zwei Jahrzehnten konzentriert er sich auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.