„Zurück nach oben“ Button –
Anker setzen + Ankerziel konform

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.

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 auch 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: http://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:

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: 100px;
 margin-top: -100px;
 visibility: hidden;
 }

Danksagung dem Autor

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

Die Ankerziele dieser Website sind konkret auf iPad Safari-Browser eingestellt und könne am Desktop des PC unterschiedlichen Browsers etwas darunter aufscheinen.

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.

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:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.