Verhalten bei Anker-Links

ist4000

Hallo!

ich habe von einer Seite meines Projekts auf einen Anker in seiner anderen Seite verlinkt. Doch die ersten Zeilen der geankerten Stelle verschwinden unter der Menüzeile meines Twenty Fourteen Child Thimes. Kann ich das verhalten des Sprungs auf den Anker soweit beeinflussen, dass die geankerte Stelle z.B. in der Seitenmitte erscheint?

[size=8]Ich betreue http://probaum-m%c3%bcnchen.de/ und es geht um die Verweise von allen möglichen Unterseiten auf die Einträge im Lexikon http://probaum-m%c3%bcnchen.de/baumlexikon/Z.B. ZTV
Ich würde mich auch über Hinweise freuen, ob man ein solches Lexikon auch anders amateurfreundlich erstellen kann, also dass der Workflow ähnlich ist, wie beim Erstellen einer Seite.[/SIZE]

Danke im Voraus.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Melewo

Ich kenne dieses Verhalten nicht nur von kleinen Seiten, sondern nicht minder von richtig großen Seiten im Web. Persönlich setze ich die Ziel-ID dann einfach höher im Dokument an.

Also statt

HTML

<a href="#abschnitt">Springe zu</a>


Text...


<h2 id="abschnitt">Text ...</h2>

nehme ich dann:

PHP

<a href="#abschnitt">Springe zu</a>


Text...
<p id="abschnitt">letzter Abschnitt vom vorausgehenden Text</p>


<h2>Text ...</h2>

Eine Alternative wäre ein kleines JavaScript, welches den oberen Abstand berechnet und danach das Element mit CSS zu platzieren:

http://de.selfhtml.org/javascript/objekte/all.htm#offset_top

ist4000

Danke für den Tipp!
Wie offset_top funktioniert habe ich nicht verstanden, aber ID-Verschieben muss schon reichen.

Melewo

Zitat von ist4000

Wie offset_top funktioniert habe ich nicht verstanden,

Ja, das geht ab und an nicht so einfach wie gedacht, musste auch erst einmal testen. Funktioniert zumindest bislang.

Also, bei Klick wird offsetTop vom Element mit der im Button angegebenen Id ermittelt, von dem ermittelten Wert werden dann im Beispiel 30 Pixel abgezogen und bis dahin soll das Dokument dann nach oben scrollen. Dadurch scrollt es dann nicht bis Top, sondern nur bis 30 Pixel unter Top.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Nur eine Testseite</title>
</head>


<body>
<div style="height:2000px; width:300px; margin:auto">
<h1>Test</h1>
<button onclick="vonOben('abschnitt')">Springe zu H3</button>
<button onclick="vonOben('abschnitt_02')">Springe zu 02</button>
<button onclick="vonOben('abschnitt_03')">Springe zu 03</button>


<p>Ein langer Text beginnt hier.<br>
Text...<br>
Text...<br>
Text...<br>
Text...<br>
Text...<br>
Text...<br>
Ein langer Text endet hier.<p>
<p>Noch mehr Text...</p>


<h3 id="abschnitt">Text ...</h3>
Text
<h3 id="abschnitt_02">Text ...</h3>
Text
<h3 id="abschnitt_03">Text ...</h3>
</div>


<script type="text/javascript">
function vonOben(welches) {
    var doc = document.getElementById(welches).offsetTop
    doc = parseInt(doc);
    doc = doc - 30;          // Scrollen bis 30px unter Top
    window.scrollTo(0, doc);
}
</script>
</body>
</html>

Alles anzeigen

ist4000

Danke! Das Beispiel ist sehr einleuchtend.
Lässt sich das in das Verhalten von Ankerlinks im gesamten WP-Projekt einbinden? Das gute an WP ist ja, dass Autoren auch ohne Code die Seite betreuen kann. Deshalb habe ich TinyMCE Extended installiert, weil man dort einen Anker mit einem Knopf setzen kann.

Melewo

Ist ja nur ein Beispiel. offsetTop soll sich ja eigentlich auf ein Elternelement beziehen, wobei im Test aber auch dann der richtige Wert geliefert wurde, wenn ich noch einen zusätzlichen DIV-Bereich davor einfügte. Somit müsste das erst einmal mit einem richtigen Theme ausgetestet werden, ob sich da der Wert einheitlich korrigieren lässt.

Auf[COLOR=#000080] onclick[/COLOR] innerhalb eines Links würde ich ebenfalls verzichten, stattdessen addEventListener benutzen und versuchen eine geeignete Funktion zu definieren. Bei rückwirkend in Beiträgen benutzen, würde voraussetzen, dass bereits immer mit <Element id="Anker-ID"> gearbeitet wurde.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Verhalten bei Anker-Links

Jetzt mitmachen!