Ich kämpfe damit, dass meine Ankerlinks richtig funktionieren. Webseite ist http://www.imprero.com und ganz oben sehen Sie einen Link “Zobacz atrakcje”, der zu einem Abschnitt weiter unten namens “Produkty” führen sollte. Schon hier positioniert das Scrollen das Fenster zu weit nach oben, da alle zwei Icon-Reihen sichtbar sein sollten (laut div id=”produkty”). Dies ist nun die Produktliste, die intern mit Abschnitten der Seite unten verlinkt ist. Nur die ersten beiden stehen richtig, alle weiteren mehr oder weniger falsch. In jedem Produktbereich gibt es einen Link “Lista atrakcji”, der zurück zur Produktliste führt. Wenn ich auf denselben Icon-Link klicke, führt er mich oft zu einer etwas anderen Position. Was zum Teufel??? Irgendwelche Ideen? Würde mich freuen…
Ankerlinks scrollen an die falsche Position
Das Problem besteht darin, dass sich Ihr fester Header außerhalb des Dokumentenflusses befindet, sodass seine Höhe/Position nicht in die Bildlaufposition des Browsers einbezogen wird. Wenn Sie den Header ausblenden würden, nachdem Sie auf das Anker-Tag geklickt haben, würden Sie sehen, dass es Sie an die richtige Stelle bringt. Dies kann mit ein wenig CSS kompensiert werden:
// Adjustment for anchor tag positioning with fixed header
:target:before
{
content: "";
display: block;
height: 57px; //Height of header
margin-top: -57px;
}
-
Hallo, habe dein CSS am Ende meines Stylesheets eingefügt und … hat nicht geholfen. Schau mal 🙁 Was habe ich falsch gemacht?
– Chris Osiak
4. April 2017 um 17:12 Uhr
-
Es sieht so aus, als wäre Ihnen bei der Eingabe des CSS ein Tippfehler unterlaufen. Ich denke, Sie haben alles in eine Zeile gestellt und der Kommentar zur Höhe hat die Rand-Oberseiten-Regel gebrochen. Mein Rat wäre also, einfach “//Height of header” zu entfernen und es dann erneut zu versuchen. Die Ausgabe ist auf Zeile 1395 von imprero.com/wordpress/wp-content/themes/generatepress_child/…
– dukedevil294
4. April 2017 um 18:01 Uhr
-
Dachte nicht, dass der Kommentar die Regel brechen wird. Jedenfalls immer noch nicht gut. Je nach Link wandert es an unterschiedliche Positionen und kann es nicht in jedem Fall gut aussehen lassen 🙁
– Chris Osiak
4. April 2017 um 20:24 Uhr
-
Nun, es sieht so aus, als ob das Layout an jedem Ort anders ist. Die Höhe des Div mit dem Datenknoten „58d13008b6de8“ beträgt also 140 Pixel und die Höhe des Div mit dem Datenknoten „5836c59051ea9“ beträgt 80 Pixel. Diese Diskrepanz (und einige andere) in Ihrem Layout führen dazu, dass die Bildlaufposition für jedes Anker-Tag unterschiedlich ist. Der einfachste Weg, dies zu sehen, besteht darin, alle Klassen aus dem div mit dem Datenknoten „5836c59051ea9“ zu entfernen und sie durch dieselben Klassen aus dem anderen „fl-module fl-module-heading fl-node-58d13008b6de8 kontakt“ zu ersetzen -innere Überschrift”. Dann verhalten sich beide Tasten gleich.
– dukedevil294
4. April 2017 um 21:11 Uhr
-
Das bedeutet dann, dass es ein Problem mit der _scrollToElementOnLinkClick-Funktion geben muss, die ausgelöst wird, wenn Sie auf diese Schaltflächen klicken. Sie müssen es ändern, um auch die 57px-Höhe Ihres festen Headers zu kompensieren.
– dukedevil294
5. April 2017 um 13:41 Uhr
