Anker-Navigation scrollt zur falschen Position

Bei manchen Themes bewirkt ein Klick auf einen Link im Menü nicht, dass eine neue Seite geöffnet wird; stattdessen wird die Seite zu einer bestimmten Position nach unten gescrollt. Diese Art von Navigation ist beispielsweise recht populär auf einer bestimmten Sorte Landing Pages (“One Pager”).

Scroll-Ziele werden nicht erreicht

  • LazyLoad ist in WP Rocket aktiv.
  • Du klickst auf einen Link in der Navigation der dann zu einem Ziel weiter unten auf der Seite scrollen soll (außerhalb des sichtbaren Bereichs).
  • Das automatische Scrollen endet jedoch an einer falschen Position, das Scroll-Ziel wird nicht erreicht.

Lösung: LazyLoad deaktivieren

Um wieder ein korrektes Scroll-Verhalten herzustellen, solltest du LazyLoad deaktivieren – zumindest auf der Seite mit der Anker-Navigation.
 LazyLoad für bestimmte Seiten oder Beiträge deaktivieren

Was passiert genau?

Die Positionen der Scroll-Ziele werden errechnet, wenn die Seite im Browser geladen wurde. Sobald die Seite vollständig angezeigt wird, „kennt“ der Browser die Position jedes Scroll-Ziels und kann exakt zu diesen Koordinate scrollen, sobald du einen Anker-Link klickst.

Wenn allerdings LazyLoad aktiv ist, werden Bilder außerhalb des sichtbaren Bereichs nicht sofort geladen. Ihre jeweilige Höhe „fehlt“ dem Browser also in seiner Berechnung der Scroll-Ziele, so dass deren Positionen nicht mehr stimmen.

Sobald du mit dem Scrollen beginnst, erscheinen weitere, „lazy“ geladene Bilder, deren Höhe sich zu der bisherigen Höhe des HTML-Dokuments hinzu addiert. Die vom Browser zuvor errechneten Scroll-Ziele werden so mit jedem nachgeladenen Bild auf der Seite weiter nach unten verschoben und die Navigation schlägt fehl.