Javascript: sanftes Scrollen bzw. nach oben Springen

Auf vielen Websites gibt es am Ende von lange Seiten einen Link, der wenn man ihn anklickt einen auf den Anfang der Seite “springen” lässt. Am einfachsten realisiert man einen solchen Link, wenn man als Ziel lediglich das Rautenzeichen als Ziel angibt:

<a href="#">Nach oben springen</a>

Man kann aber auch auf schon existierende IDs verweisen:

<div id="kopfbereich">...</div>
...
<a href="#kopfbereich">Nach oben springen</a>

Hierbei dient das Universalattribut id sowohl als Ansatzpunkt für die CSS-Regeln als auch für Seiten-interne Verweise: #kopfbereich ist damit Sprunganker und Selektor.

Nicht springen sondern scrollen

Wenn man auf so einen Ankerverweis klickt, dann gelangt man sofort nach oben bzw. zu der definierten stelle. Manchmal wünscht der Kunde oder Grafiker, dass nicht gesprungen sondern gescrollt wird. Hier kommt dann Javascript ins Spiel.

Für ein aktuelles Projekt, war so ein sanftes springen bzw. scrollen gewünscht. Da die Website sonst kein Javascript oder Javascript-Bibliotheken im Einsatz hat konnte ich nicht auf Lösungen zurückgreifen, die auf jQuery & Co. basieren. Alleine wegen ein bisschen Scrollen bis zu 90 KByte extra einzubauen ist doch auch irgendwie albern.

Daher habe ich nach einer “Standalone”-Lösung gesucht. Nach etwas Suchen und ein paar Tests habe ich mich für die Lösung auf kryogenix.org entschieden. Einer der Gründe ist, dass ich nicht extra Anker mit der veralteten Methode (<a name="top"><a>) definieren musste (wie einige andere Testkandidaten das verlangt haben) sondern auf schon existierende id-Attribute zurückgreifen konnte.

[Nachtrag] da einige Leute längere Texte nicht lesen möchten, kommt hier eine Anmerkung. In jedem Browser kann man auf #ankername verweisen und der Browser springt dorthin: egal ob man den Ankernamen mit einer ID (id="ankername") oder mit dem veralteten Attribut name (name="ankername") definiert wurde. Das habe ich auch im ersten Teil des Artikels beschrieben.

Aber es gibt draußen aber ein paar JAVASKRIPTE! (nicht vergessen: das Thema ist scrollen statt springen) die kommen mit ids nicht klar und verlangen einen Anker der per name definiert ist, damit die Ihre Wirkung – scrollen anstatt springen – entfalten können. Deswegen habe ich das vorgestellte Skript als positiv hervorgehoben, weil das Skript mit schon vorgegeben ids zu Recht kommt.[/Nachtrag ende]

Ich habe den Code im Original hier hochgeladen: Sanftes Scrollen (javascript, 4,56 kbyte), falls es die Seite mal nicht geben sollte. Ist mir leider schon ein paar mal passiert, dass es Websites mit nützlichen Code-Fragmenten irgendwann nicht mehr gab.

Wenn man den Code durch einen Komprimierer schickt, dann kann man ihn um einiges kleiner machen. Ich habe drei Komprimierer getestet, aber bei allen hat der Javascript hinterher nicht funktioniert. Bei jscompress.com erreichte ich ein positives Ergebnis. Das Script war danach nur 1,94 kbyte groß und hat auch funktioniert: Download (javascript, 1,94 kbyte).

Und was ist mit der Tastatur

Ich persönlich brauche keine Links auf der Website, die mich nach oben springen oder scrollen lassen und benutze die auch nie. Mal abgesehen von der Scrolltaste auf der Maus nutze ich folgende Tasten auf der Tastatur:

pos1: an Anfang der Seite springen
ende: an Ende der Seite springen
bild⇑: in jeweils der aktuellen Höhe des Browserfensters nach oben springen
bild⇓: in jeweils der aktuellen Höhe des Browserfensters nach unten springen

Aber das ist meine Vorliebe und die muss sich nicht immer mit der Vorliebe des Kunden decken. 🙂

Ach ja, wer was besseres, cooleres, einfacheres oder kleineres kennt, nur her damit.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.