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
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, Titel „Zum Seitenanfang ↑“ und mit Link verknüpfen = URL: #
Anmerkung: Hindurch Plug-in TinyMCE Advanced ist das Einfügen eines Ankers vereinfacht möglich.
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>
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. Die Anker zu verlinkter Seite müssten zur konformen Darstellung mit Anker von wegen Abdeckung durch Headerleiste etwas darüber gesetzt sein* – Umständlich, daher siehe nächsten Titel: Dass der Anker anderer Seite hinlänglich das Ziel findet.
* Bei Schriftvergrößerung würde das Ankerziel der verlinkten Seite etwas weiter unter dem Header dargestellt, im gegensatz bei Schriftverkleinerung das Ankerziel gleich bliebe.
Dass der Anker des Hinweises anderer Seite das Ziel hinlänglich findet,
‚etwas‘ Fortgeschritten:
HTML Anker als Sprungmarke setzen (position:fixed springt zu weit.)
Der Anker erhält einen Class-Selektor:
class="position"
<h4><a id="ankername2" class="position"></a>Anker setzen für ein anderes Dokument:</h4>
Dashboard/Design/(CSS bearbeiten) CSS Stylesheet Editor,
die Class Definition in CSS:
.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.
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-ins für Anker:
Vorhinein Plug-ins wie „Scroll to Anchor“ probiert, mit nur teils Erfolg.
Aufzeichnung, Andere Nebenanmerkung:
Mit dem Plug-in WP External Links hatte sich ergeben, dass ich versuchsweise ein Ankerziel von <a id=“ankername“></a> auf <span id=“ankername“></span> bearbeitet habe. Erklärung: Wir :-) klicken auf Bemerkung ⇔
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 z.B. 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.