Sprungmarken auf Website – ab zum Seitenanfang

Oft sieht man auf Websites ganz unten einen Pfeil nach oben über den man an den Seitenanfang springen kann. Genauso gibt es bei längeren Inhalten gerne eine Möglichkeit, direkt zu bestimmten Punkten innerhalb des Seiteninhalts zu springen. Dies ist relativ einfach machbar.

Hier kommt der bereits bekannte HTML-Befehl für Links zum Einsatz mit einer Ergänzung.

Unser HTML-Befehl für Links erhält ein Sprungziel innerhalb einer Seite – die wird durch eine Raute (Hash-Tag) und einen eindeutigen Namen erreicht.

<a href="#bereich1">gehe zu … </a>

Jetzt haben wir den Aufruf des Sprungziels, aber das Ziel selber fehlt noch.

Um den Zielbereich zu definieren, wird genau dort ein beliebiger HTML-Befehl (in folgenden Beispiel <h1>) mit dem Attribut id ergänzt. Als Attributwert kommt wieder der eindeutige Name, allerdings ohne die Raute.

<h1 id="bereich1">Überschrift 1</h1>

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

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

Klickt nun jemand bei der fertigen Seite auf den Link, durchsucht der Browser die Seite, ob irgendwo dieser Name auftaucht und zeigt den Inhalt dann an. Hilfreich beim testen ist, dass es genug Inhalt gibt, um überhaupt scrollen zu müssen.

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.