WordPress & Webwork

Javascript: sanftes Scrollen bzw. nach oben Springen

Ein sehr kleines Javascript, was beim Anklicken des "Nach oben"-Links zum Anfang der Seite sanft scrollt.

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.

13 Reaktion(en)

  1. Nico

    Die Nutzung bereits existierender IDs sollte eigentlich auf jeder Webseite funktionieren. Das dürfte keine Eigenart des verlinkten Javascripts sein…

  2. Manuel

    Cool wäre es jetzt noch wenn du die von dir am Ende erwähnten Tasten (pos1, ende) mit den Scrollfunktionen aus dem JS belegen würdest. Also dass das Script abfängt wenn man Pos1 drückt und sanft nach oben scrollt.

    So als Anregung. Ist natürlich Geschmacksache 😉

  3. Nico

    Okay, das gilt aber nur für die Skripte, die du getestet hast. Die Browser an sich können alle ohne weiteres zu beliebigen IDs springen…

    1. Perun

      @Nico,

      Okay, das gilt aber nur für die Skripte, die du getestet hast. Die Browser an sich können alle ohne weiteres zu beliebigen IDs springen…

      genau das habe ich auch weiter oben geschrieben. Einem Browser reicht die id um zu der Stelle zu springen. Manche Skript können, aus welchen Gründen auch immer, keine schon existierende ids nutzen.

  4. Klaus

    das Script habe ich auch schon länger im Einsatz. 🙂
    Es funktioniert nach oben und nach unten, außerdem geht es mit Skiplinks oben und unten.
    Auch die Zeit kann man bequem einstellen. 🙂

    Die jquery-Scripte funktionieren oft nicht mit Skiplinks und sind auch sonst eher unhandlich.

  5. Sebastian

    Einer der Gründe ist, dass ich nicht extra Anker mit der veralteten Methode […] definieren musste sondern auf schon existierende id-Attribute zurückgreifen konnte.

    Laut selfhtml ist es seit HTML4 möglich Anker auf IDs anzusetzen und a name="" zu ersetzen.

    Aber sonst gut zu wissen. Danke

    1. Perun

      @Sebastian,

      Laut selfhtml ist es seit HTML4 möglich Anker auf IDs anzusetzen und a name="" zu ersetzen.

      Leute, ist es so schwer einen kurzen Artikel und die Kommentare zu Ende zu lesen?

      Ich habe nirgendwo behauptet das es in HTML nicht möglich ist auf #ankername zu verweisen, das habe ich ersten Teil des Artikels explizit so erwähnt!

      Bitte zeige mir wo ich das behauptet habe, dass es nicht möglich sein soll.

      Es gibt Skripte draußen, die verlangen explizit a name="blabla" weil sie sonst nicht funktionieren und das Skript was ich erwähnt habe kann scrollen und die schon eingesetzten ids benutzen.

  6. Klaus

    Ich habe durch Zufall diesen Artikel entdeckt und werde das auf meiner Website realisieren.
    Bisher habe ich das Scrollen mit JQuery umgesetzt, aber wie Peter Lohren schon schrieb ist das für das bischen einfach zu groß.

    Danke für den Artikel

Die Kommentare in diesem Beitrag sind geschlossen.

WordPress-Schulungs­unter­lagen

Anleitung für Autoren und Redakteure
Schneller und unkomplizierter Einstieg in die redaktionelle Betreuung einer WordPress-Installation.

Handbuch für Administratoren
Schneller und unkomplizierter Einstieg in die technische Betreuung einer WordPress-Installation.

Anschauen