Langsam an den Anfang einer Seite springen mit der Smooth-Scroll-Funktion

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Mit der Smooth-Scroll-Funktion springt man langsam an den Anfang einer Seite

22Feb2014

Langsam an den Anfang einer Seite springen


Für die Besucher einer Website ist ein "Zurück-Button" sehr hilfreich um nicht nach dem Lesen eines Artikels wieder mühsam den Anfang einer Seite zu erreichen. Und durch eine Smooth-Scroll-Funktion kann der Bediener leicht verfolgen wohin die Reise nach dem Bedienen des Buttons geht.
Um an den Anfang einer Seite zu springen, befindet sich auf diesen Seiten immer unten links ein Button zum Bedienen. Natürlich nur wenn die Seite eine bestimmte Länge hat. Der Button erhält eine zeitliche Animation in der das Aussehen des Buttons von einer viereckigen Form zu einer runden Form wechselt. Und das Springen an den Anfang einer Seite erfolgt nicht abrupt, sondern wird durch langsames Scrollen erreicht.

Dieser Button wird in HTML (HyperText Markup Language) wie folgt geschrieben:

<p id="gotop">
    <a href="#seite"
        title="Zum Seitenanfang dieser Seite springen">
        <span>Zum Seitenanfang springen </span>Λ
    </a>
</p>

Als Ankerpunkt dient der "div-Container" am Anfang jeder Seite:

<div id="seite">

Dann noch ein wenig CSS (Cascading Style Sheet) zum Gestalten des Buttons.
Ich habe mich hierbei für einen grauen Button mit Farbverlauf entschieden, der sich fest in der linken unteren Ecke befindet und beim Überfahren mit dem Mauszeiger langsam eine runde Form annimmt.

#gotop,
#gotop a {
    position: fixed;
}

#gotop a {
    font: 1.1em/2 Arial;
    text-align: center;
    color: #fff;
    background: radial-gradient(circle,#282828,#555);
    border-radius: 10px;
    box-shadow: 0 0 4px 2px #666;
    width: 2em;
    height: 2em;
    bottom: 40px;
    margin-left: -5px;
    opacity: .8;
    transition: 1s;
    z-index: 10;
}

#gotop a:hover,
#gotop a:focus {
    background: radial-gradient(circle,#555,#282828);
    border-radius: 30px;
}

#gotop span {
    height: 0;
    width: 0;
    top: -4000em;
    overflow: hidden;
    position: fixed;
}

Bei langen Seiten, wie zum Beispiel bei dieser, würde aber der Sprung zum Anfang der Seite noch sehr abrupt erfolgen und wäre für manchen Besucher verwirrend. Hier kommt nun die Smooth-Scroll-Funktion ins Spiel.

Wie ist das realisiert?


Veraltete Umsetzung!

Zuerst hatte ich mit Hilfe der JavaScript (objektorientierte Programmiersprache)-Klassenbibliothek "jQuery" dieses "langsame Scrollen" mit den folgenden Zeilen umgesetzt.

$(document).ready(function() {
    $("a[href*=#seite]").click(function() {
        if (location.pathname.replace(/^\//,'') == 
        this.pathname.replace(/^\//,'')
        && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target ||
            $("[name=" + this.hash.slice(1) +"]");
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $("html,body").animate({scrollTop: targetOffset}, 1000);
                return false;
            }
        }
    } );
} )

Aber nur wegen dem Scrolleffekt ein so großes JavaScript (objektorientierte Programmiersprache), inklusive der JavaScript (objektorientierte Programmiersprache)-Klassenbibliothek "jQuery", zu benutzen, ist für den Aufbau einer Website absolut unvernünftig. Alleine die JavaScript (objektorientierte Programmiersprache)-Klassenbibliothek "jQuery" ist schon knapp 90 KByte groß.


Neuere Umsetzung!

Also benutze ich für das langsame Scrollen ein JavaScript (objektorientierte Programmiersprache) mit dem schönen Effekt des sogenannten "Smooth-Scroll".
Auf der Seite www.kryogenix.org/code/browser/smoothscroll steht das Script "smoothscroll.js" zum Download bereit und funktioniert mit allen Sprüngen auf einer Seite. Ich habe lediglich den Intervallzeitraum von 10 auf 50 gesetzt.
Es ist eine sehr elegante und optisch wirksame Methode, um auf einer Webseite zwischen verschiedenen Elementen der Seite hin und her zu scrollen.


09Jan2016

Button nicht direkt einblenden


Damit der Button erst eingeblendet wird wenn die Seite schon etwas nach unten gescrollt wurde, habe ich noch das folgende JavaScript (objektorientierte Programmiersprache) eingebunden. Hierbei wird der Button zuerst auf unsichtbar geschaltet und erst nach einem Versatz der Seite um 300 Pixel wird der Button langsam sichtbar. Mit display: block ist das auch zu realisieren, aber nicht das langsame Ein- und Ausblenden.

var gotop = document.getElementById('gotop');
window.onscroll = function() {
    gotop.style.opacity =
        ((window.pageYOffset || document.documentElement.scrollTop)
        > 300) ? '1' : '0';
};

Nun fehlt nur noch eine Ergänzung im CSS (Cascading Style Sheet).

#gotop {
    opacity: 0;
    transition: 1s;
}

Jetzt wird der Button langsam ein- und ausgeblendet wenn die Seite ein Stück nach unten gescrollt wurde.

Und vielen Dank an Michel für den Denkanstoß.

Zum Seitenanfang springen Λ