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>

Anker zu einem Widget, wie geht das?

Im Quelltext der Website sind die Widgets mit ID. Bspw ist das hier für das Search-Widget <aside id="search-7" class="widget widget_search">. Also der Anker-Link heißt  #search-7.

Fachsimpelei

<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>

Das Voting! – warum auch nicht … 

Clker-Free-Vector-Images
+ Tierstimmenarchiv
Ton ⊕ ↙ onmouseover

… nur so ob 'aber
ja'
oder so
'Na ja

… nichts für ungut!

Grüß die Leserin,
Servus den Leser!

So sehr mir des voten durch das Feedback-Plug-in Helpful auch gefragt ist! – so ist im „Erkenne dich selbst“ die Zeit … Da solls nun mit so Schuss von Humor und Witz? – und geht gar in die Komik. Ja, weil das wünsch ich all den von besuche!

Klick on ↑
^{Das Audio da ist im loop="on".}

WordPress 'Hello Dolly'

So Linksbündig und rechtsbündig in_einer_Zeile

HTML:

<div style="text-align:left; float:left;">Linksbündig</div>
<div style="text-align:right;">Rechtsbündig</div>