1. Button in HTML erstellen

Wir erstellen uns einen Button, der von einem a-Element (Link-Element) umschlossen wird. Dem Link-Element übergeben wir im href-Attribut lediglich das Raute-Zeichen. Den Button können Sie mittels CSS in seinem Design verändern, das soll allerdings nicht Teil dieses Tutorials sein.

Ihre Webseite sollte nun wie folgt aussehen:

 
    

2. Scroll Back To Top Animation programmieren

In unserer JavaScript-Datei erstellen wir eine Funktion in der wir das Link-Element, welches unseren Button umschließt, selektieren. Mit einem Klick-EventListener verknüpft, wird sobald der Button bzw. der Link geklickt wurde, hochgescrollt.

Die Animation die wir dafür benötigen sieht wie folgt aus: Wir selektieren den Tag html und body und wenden darauf die jQuery animate Funktion aus in der wir sagen, das scrollTop den Wert 0 bekommt und diese Animation 1200 Millisekunden dauern soll. Diese Werte lassen sich selbstverständlich ändern.

var scrollToTop = function () {
    $(".toTop").on("click", function (e) { //Klick Event
        e.preventDefault(); //keine Weiterleitung auf andere URL
        $("html, body").animate({
            scrollTop: 0
        }, 1200); //Animationsdauer in Millisekunden
    });
};
scrollToTop();

Nun sollte der mit jQuery programmierte Scroll Back To Top Button funktionieren. Achten Sie natürlich darauf, dass die Funktion des Buttons erst zum Vorschein tritt, wenn Sie bereits herunter gescrollt haben auf der Webseite.

Sie wollen zu einem bestimmten Objekt scrollen lassen? Wie Sie eine simple jQuery Anwendung schreiben, die es ermöglicht zu jedem HTML Element mit ID scrollen zu können, erfahren Sie in folgendem Artikel: jQuery Scroll To Element (Tutorial)