fullsizeoutput_161
@EWP, HTML + CSS

Anker setzen + Ankerziel konform

Send feedbackhelpful-heart
Bild, Clker-Free-Vector-Images

FĂŒr den Besucher der Website sind die Anker von Komfort. Somit sollte man sich mal kurz damit befassen. Insbesondre ist das Ankerziel fĂŒr ein anderes Dokument zu beachten.

Anker setzen

Fangen wir mal an:
FĂŒr hin und wieder eignet sich auch folgender Code:

<a href="#">Zum Seitenanfang ↑</a>

Dargestellt:
Zum Seitenanfang ↑

Oder einfach durch Link einfĂŒgen, s. Titel "Zum Seitenanfang ↑" und mit Link verknĂŒpfen = URL: #

Anmerkung: Das EinfĂŒgen eines Ankers mit Plug-in TinyMCE Advanced ist besonders einfach.

FĂŒr lĂ€ngere Seiten oder Blogs und alles in allem praktikabel ist zum Schwimmen nach oben ein Plug-in wie Float to Top Button.

Anker setzen fĂŒr selbiges Dokument

1.   Der Anker oder die Textmarke ist die Location, welche der Hinweis (Link) hinfĂŒhren soll.

HTML-Tag und Attribut:

<h4 id="ankername">Anker setzen fĂŒr selbiges Dokument:</h4>

… das ist die Darstellung der Überschrift.

Dasselbe ohne Text:

<a id="ankername"></a>

Link und Anker

Merke: Das Ankerziel, die id ohne #-Zeichen setzen, als wie folgend die Verlinkung (<a href="#ankername>") mit #-Zeichen.

2.   Die Verlinkung, also der Hinweis zur Textmarke (Anker):

Springe zu Textmarke <a href="#ankername">Anker setzen fĂŒr selbiges Dokument ↑</a>

Darstellung:

Springe zu Textmarke Anker setzen fĂŒr selbiges Dokument ↑

Anker setzen fĂŒr ein anderes Dokument

1.   Die Textmarke ist wie "Anker setzen fĂŒr selbiges Dokument".
2.   Die Verlinkung zur Textmarke:

Springe zu Textmarke <a href="http://www.usw/#ankername2">Anker setzen fĂŒr ein anderes Dokument</a>
Diesen Beispiels ergibt sich fĂŒr den Link folgende Adresse: https://wegerl.at/wordpress/zurueck-nach-oben-button/#ankername2

Springe zu Textmarke Anker setzen fĂŒr ein anderes Dokument → (Beispielshaft in neuem Fenster.)

Ein Ankerziel selbiger Seite (Anker setzen fĂŒr selbiges Dokument) ist im Vorhinein konkret gesetzt und konform dargestellt. Indessen die Anker zu verlinkter Seite mĂŒssten zur konformen Darstellung von wegen Anker und Abdeckung durch Headerleiste etwas darĂŒber gesetzt sein*. UmstĂ€ndlich, daher siehe nĂ€chst: Der Link zu anderer Seite/Beitrag findet das Ankerziel.
* Bei SchriftvergrĂ¶ĂŸerung wĂŒrde das Ankerziel der verlinkten Seite etwas weiter unter dem Header dargestellt, indes bei Schriftverkleinerung das Ankerziel gleich bliebe.

Der Link zu anderer Seite/Beitrag findet das Ankerziel

S. im Tiel HTML Anker als Sprungmarke setzen (position:fixed springt zu weit.)

Vorerst ist ĂŒber Dashboard/Design/Customizer oder Child-Tehme die Class zu definieren.

 .position::before {
 display: block;
 content: "";
 height: 80px;
 margin-top: -80px;
 visibility: hidden;
 }

Danksagung dem Autor

Der Auszeichnungen height: 80px; margin-top: -80px; bedarf es der Pixel (Attributwert) individuelle Anpassung.

Der Anker erhÀlt dann im HTML einen Class-Selektor:
Ebd. des Beispiels class="position". Hiermit sieht das im Editor so aus:

<h4><a id="ankername2" class="position"></a>Anker setzen fĂŒr ein anderes Dokument:</h4>

Fachsimpelei

Bildillustration und Ankerziel in Überschrift

Ergibt sich das Ankerziel in einer Überschrift unter einem Bild, entsteht durch Class-Selektor gewisser Abstand der Überschrift zum Bild und hiermit ist bei der Illustration darauf zu achten, eine Überschrift mit Anker nicht nĂ€chst unter ein Bild zu setzen.

Anker zu einem Rahmen setzen

Anker zu einem Text in einem Rahmen fĂŒhren, folgt dieser nach den Auszeichnungen fĂŒr den Rahmen:

<p style="border: 1px solid #0e61b5; width; padding: 10px;"><a id="ankername" class="position"></a>Soll der Anker zu einem Text in einem Rahmen fĂŒhren, folgt dieser nach den Auszeichnungen fĂŒr den Rahmen</span></p>
Plug-in fĂŒr Anker

Vorhinein Plug-ins wie "Scroll to Anchor" probiert, mit nur teils Erfolg.

Allgem. Hinweise

Link und Anker
von Stefan MĂŒnz

Ein Anker wird genau wie ein Verweis mit "a-Element" erstellt. Der Unterschied besteht darin, dass kein Attribut "href" gesetzt wird, stattdessen das Universal-Attribut "id". Ein ganzer Anker sieht also so aus: <a id="ankername">
</a>

Um innerhalb einer Datei einen Verweis zu einem im selben HTML-Dokument vorhandenen Anker zu setzen, gilt folgende Vorlage:
<a href="#ankername">
</a>
Auch Anker innerhalb anderer HTML-Webseiten sind auf diese Weise adressierbar.

Beispiele:
<a href="andere-seite.html#ankername">
</a>
<a href="http://example.org/verzeichnis/seite.html#ankername">
</a>

"a-Elemente" sind zugleich Verweis als auch Anker fĂŒr Verweise, wenn sowohl ein "href-" als auch ein "id-Attribut" vorhanden ist, so wie das letzte "a-Element" im obigen Beispiel. Den Ankernamen bei "id" wird frei vergeben, jedoch ohne Leerzeichen, möglichst kurze, prĂ€gnante und lesbare Namen. BeschrĂ€nkung auf lateinische Buchstaben, arabische Ziffern sowie den Unterstrich (_). Das erste Zeichen des Namens sollte ein Buchstabe sein. Damit sind die "ID-Namen" auch gleich kompatibel fĂŒr den Zugriff via JavaScript und CSS. Groß- und Kleinschreibung werden unterschieden: #Ankername wird nicht gefunden, wenn auf #ankername verlinkt ist.

Groß- und Kleinschreibung bei Webadressen –

Tipps rund um’s Internet Webworker GmbH

Internet- und eMailadressen kennen im Grunde keine Unterscheidung zwischen Groß- und Kleinschreibung. Ausnahme: Lautet eine Adresse bspw.. www.internetadresse.de/Unterverzeichnis/Datei.html, so ist alles nach dem "/" (Slash) in genau dieser Schreibweise einzusetzen. Weil: Das "Unterverzeichnis" ist ein Verzeichnis und die "Datei.html" eine Datei auf dem Webserver, wie man sie auch von der PC-Festplatte her kennt. Da aber Webserver beinahe ausschließlich auf Unix-Systemen laufen, die im Gegensatz zu Windows auch physikalisch auf Groß-/Kleinschreibung achten ("case sensitive"), ist die Schreibweise hier – und nur hier! – wichtig.


 Und wie ist dein Erfolg des Beitrags?

Bereitgestellt von Helpful

👉🏿 Das könnte fĂŒr Dich auch interessant sein ...

Sovrn