Link mit Sprungmarke und Sprungziele, z.B. „zum Anfang der Seite“

Oft sieht man die Möglichkeit bei längeren Seiten einen Link zum Zurückspringen an den Anfang der Seite. Oder am Anfang einer Seite mit viel Inhalt ein Inhaltsverzeichnis mit Links, die direkt auf den Bereich innerhalb der Seite springen.

Eine weitere Verwendung von dem HTML-TAG <a href=""> ist also, diesen als Sprungbefehl zu verwenden. Das funktioniert sichtbar am besten bei langen Inhalten – daher sollten bei folgenden Beispielen immer genügend Textinhalt vorhanden sein, damit normalerweise gescrollt werden muss.

Aber erst zum grundlegenden Aufbau von Sprungmarken.

Für Sprünge innerhalb einer Seite müssen 2 Bedingungen erfüllt sein:

1. ein Sprunglink
2. ein Sprungziel

Schauen wir uns dies im Detail an.

Aufbau Sprunglink

Schauen wir uns den Sprunglink an – er unterscheidet sich wenig vom bisher gekannten HTML-Befehl für Links:

<a href="#zumSeitenanfang">zum Anfang der Seite</a>

Wichtig ist das Rautezeichen # - dies zeigt dem Browser an, dass er auf der Seite zu dem Sprungziel „anfangderseite“ springen soll. Bei der Benennung des Sprungziels gilt das gleiche wie bei Dateinamen! Also am besten alles klein, keine Leerzeichen und nur Zeichen von a-z und 0-9.

Bei dem eindeutigen Namen gibt es also folgende technischen Einschränkungen (dieselben wie bei Dateinamen):

• a-z
• 0-9
• Keine Leerzeichen
• Keine Umlaute oder Sonderzeichen

Klickt ein Besucher auf diesen Link, sucht der Browser im Dokument einen eindeutigen Bereich mit der von uns vergebenen Bezeichnung „anfangderseite“. Findet er nichts, geschieht nichts.

Das Sprungziel

Das Sprungziel muss eine eindeutige Bezeichnung haben. Hier wird das Attribut id="bezeichnung" innerhalb eines HTML-Befehls verwendet. Dieses lernen wir bei CSS noch sehr gut kennen!

Beispielhafte Verwendung vom Attribut id=

<h1 id="anfangdestextes">...</h1>
<p id="absatz1">...
<h2 id="unterkapitel11">...</h2>

Wir können also dieses Attribut an bzw. innerhalb jedes beliebigen HTML-Befehls unterbringen. Sinnvoll ist also, wenn wir an den Anfang der Seite springen, das Sprungziel beispielsweise in der ersten Hauptüberschrift unterzubringen:

<h1 id="zumSeitenanfang">...</h1>

Klickt jetzt jemand auf den Link, schiebt der Browser diese Hauptüberschrift in den sichtbaren Bereich.

Sollte alles technisch korrekt sein aber trotzdem so wirken, als würde nichts passiert, ist das Ziel des Sprunglinks bereits sichtbar. Einfach mehr Inhalt auf die Seite packen das gescrollt werden muss und dann nochmals testen.

Zum Testen also bitte eine HTML-Seite mit viel viel viel Inhalt erstellen und unten einen Sprunglink auf den Anfang setzen und Testen. Wichtig ist, dass man Scrollen muss – ansonsten ist der Effekt nicht sichtbar. Und was man nicht sieht, erscheint einem, als würde es nicht funktionieren!

<h1 id="zumSeitenanfang">...</h1>

<p>viel viel Inhalt</p>
<p>am besten diese Zeile 60 x untereinander kopieren</p>
<p>Damit der Effekt sichtbar wird, muss gescrollt werden!</p>

<p><a href="#zumSeitenanfang">Sprung zum Anfang</a></p>

Beispiel Sprungmarken mit Scrollen (sanft/smooth scrolling)

Unter folgendem Link gibt es das Beispiel zum Testen der Sprungmarken. Bitte beachten: hier kann es je nach verwendetem Browsertyp und Browserversion (neu ist immer besser) zu einem sanften Scrollen kommen. Dies liegt an einer CSS-Anweisung, die im Kapitel zu CSS scroll-behavior: smooth; gezeigt wird. Also bitte nicht wundern, wenn das eigene Ergebnis einfach zu der Sprungmarke sofort springt und das Beispiel sanft hin scrollt.

Sprungmarken auf andere Seiten - externe Sprungziele

Es kann sich der Link auch auf einer anderen HTML-Seite befinden und durch Klick dann direkt der Inhalt z.B. mitten in einer Seite angesprungen werden. Hier wird wie gewohnt dann der HTML-Link mit URL versehen und die Raute mit dem Sprungziel.

<a href="andereseite.htm#unterkapitel2">
zum Bereich 2 auf anderen Seite</a>

Das können Sie testen, wenn Sie mehrere Seiten anlegen wie im vorherigen Kapitel beschrieben.

Das klappt auch für externe (fremde) Seiten, wenn dort ID mit ID-Namen eingesetzt werden.

Aufgabe: Erstellung eines Sprunglinks

Eine Seite erstellen mit sehr viel Inhalt (damit man auch scrollen muss). In der Hälfte des Textes kommt eine Überschrift „hier ist die Mitte“, auf die gesprungen werden kann.

Ganz oben gibt es den ersten Sprunglink, der einen Sprung in ca. die Mitte des Textes ermöglicht (auf unsere Überschrift „hier ist die Mitte“).

Ganz am Ende der Seite soll eine Sprungmarke erstellt werden, damit man zum Anfang der Seite springen kann.