Dieses Tutorial lehnt sich an das vorherige Scroll Back To Top Button Tutorial an. Wenn Sie lediglich an einer Funktion interessiert sind, die an den Anfang der Webseite hochscrollt sind Sie vielleicht dort besser mit beraten. Allerdings kann man mit folgenden Anweisungen auch einen Scroll Back To Top Button verwirklichen.

1. Link Element und Ziel-Element erstellen

In unserer HTML-Datei müssen wir zunächst ein Link-Element erstellen, welches auf unser Ziel-Element verweist (in diesem Beispiel ein DIV Element). Hier zu geben wir die ID des Ziel-Elements im href-Attribut unseres Link-Elements an.

Klick mich

Aktuell springt der Browser nach einem Klick auf den Link direkt zu dem Ziel-Element. Um eine flüssige Bewegung zum Ziel-Objekt zu simulieren folgen Sie den Anweisungen im zweiten Schritt.

2. Scroll To Element Animation

Die Funktion scrollToElem() selektiert alle Link-Element auf Ihrer Webseite, deren Wert im href-Attribut keine URL ist, sondern mit # anfangen. Diese werden mit einem Click Event Listener ausgestattet, der anspringt, sobald das Link Element vom Nutzer geklickt wird.

Ähnlich wie im Artikel zu Scroll To Top Button wird die jQuery animate Funktion aufgerufen und zu der Stelle des im href-Attribute angegeben Element gescrollt. In diesem Beispiel dauert diese Animation 1200 Millisekunden.

var scrollToElem = function () {
    $("a[href^='#']").on("click", function (e) {
        e.preventDefault();
        $("html, body").animate({
            scrollTop: $($(this).attr("href")).offset().top
        }, 1200);
    });
};
scrollToElem();