jQuery Tutorial – Scroll to Top Button – Browser an den Anfang der Seite scrollen
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
Andreas Lang konzentriert sich seit zwei Jahrzehnten 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.
