0 1191

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:

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

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:

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

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:

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

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.

Vielen Dank fürs Sharen!Share on FacebookTweet about this on TwitterShare on Google+Email this to someoneShare on LinkedInShare on RedditShare on StumbleUponPin on PinterestShare on Tumblr

KEINE KOMMENTARE

Kommentar hinterlassen