In HTML gibt es die Möglichkeit sogenannte Anker zu setzen. Solche Anker kennst du sicherlich aus den Inhaltsverzeichnissen eines Wikipedia Artikels. Mit einem Klick auf einen Link springst du auf eine bestimmte Stelle der Seite.
Einen ähnlichen Effekt kannst du bei meinem „Nach-oben-Button“ sehen. Dieser ist für ein sanftes sliden, programmiert worden.
Wie erstelle ich einen solchen Anker?
Um einen funktionierenden Anker zu erstellen, bedarf es eigentlich nur zweier HTML-Attribute in zwei verschiedenen Links und der Anker ist perfekt. Zuerst positionierst du einen a-Tag mit dem Attribut „name“ und der Bezeichnung deiner Wahl als Wert.
1 | <a name="oben"></a> |
Zu diesem Tag wird die Seite später springen, wenn auf den Link geklickt wird. Das andere Element um den Anker zu vollenden ist ein ganz normaler Link, wie er im Internet verwendet wird, mit einem kleinen Unterschied. Der Unterschied ist, dass anstatt eines Links eine Raute und der Name des oben angegebenen a-Tags in das href-Attribut geschrieben werden.
1 | <a href="#oben">Nach oben</a> |
Nun springt die Seite beim Klick auf den Link an die gewünschte Stelle. Ein HTML-Anker kann auch seitenübergreifend genutzt werden. Hierfür muss in das href-Attribut vor die Raute der jeweilige Seitenlink geschrieben werden.
1 | <a href="https://www.rankwatcher.de/#oben">Hier klicken</a> |
Loading...
