Beispiel: zum Seitenanfang springen

Link mit Sprungmarke, 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="#anfangderseite">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.

Jetzt 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="anfangderseite">...</h1>

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

Zum Testen 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="anfangderseite">...</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="#anfangderseite">Sprung zum Anfang</a></p>

Sprungmarken auf andere Seiten

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.