Das Elementor-Inhaltsverzeichnis erzeugt automatisch Sprunganker für die erkannten Überschriften. Diese sehen zum Beispiel so aus:
#elementor-toc__heading-anchor-3Innerhalb der bereits geladenen Seite funktionieren diese Links normalerweise problemlos.
Beim direkten Aufruf einer URL wie
https://example.com/seite/#elementor-toc__heading-anchor-3kann es in Chrome jedoch passieren, dass nur die Seite geladen wird, ohne zur gewünschten Überschrift zu springen.
Warum passiert das?
Die Sprunganker des Elementor-TOC sind beim ersten Laden der Seite teilweise noch nicht vorhanden. Chrome versucht jedoch bereits vorher, zum Hash aus der URL zu springen.
Zu diesem Zeitpunkt findet der Browser das Ziel noch nicht und bleibt daher an der aktuellen Position.
Sobald Elementor fertig geladen ist, existiert der Sprunganker zwar, Chrome führt den ursprünglichen Sprung aber nicht automatisch noch einmal aus.
Firefox kann sich hier anders verhalten und trotzdem korrekt zum Ziel springen.
Lösung
Das folgende Snippet prüft beim Aufruf einer URL, ob ein Elementor-TOC-Anker enthalten ist.
Ist der Zielanker bereits vorhanden, wird sofort dorthin gescrollt. Falls Elementor den Anker noch nicht erzeugt hat, wartet ein MutationObserver, bis die entsprechende ID im DOM erscheint.
/**
* Fix für direkte Links auf Elementor-TOC-Anker.
*
* Beispiel:
* /seite/#elementor-toc__heading-anchor-3
*
* Chrome versucht beim ersten Seitenaufruf teilweise zum Hash zu springen,
* bevor Elementor die TOC-Anker erzeugt hat.
*/
add_action( 'wp_footer', function () {
?>
<script>
(function () {
const hash = window.location.hash;
if (!hash || !hash.startsWith('#elementor-toc__heading-anchor-')) {
return;
}
function scrollToAnchor() {
const target = document.querySelector(hash);
if (!target) {
return false;
}
target.scrollIntoView({
behavior: 'auto',
block: 'start'
});
return true;
}
// Falls Elementor den Anchor bereits erzeugt hat
if (scrollToAnchor()) {
return;
}
// Warten, bis Elementor die entsprechende ID erzeugt
const observer = new MutationObserver(function () {
if (scrollToAnchor()) {
observer.disconnect();
}
});
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['id']
});
// Sicherheitsnetz: Observer nach 5 Sekunden beenden
setTimeout(function () {
observer.disconnect();
}, 5000);
})();
</script>
<?php
}, 100 );Was macht das Snippet?
- Es greift nur bei URLs mit
#elementor-toc__heading-anchor-.... - Normale Sprunganker auf der Website werden nicht beeinflusst.
- Ist der Elementor-Anker bereits vorhanden, wird sofort dorthin gescrollt.
- Ist er noch nicht vorhanden, wartet das Snippet darauf, dass Elementor ihn erzeugt.
- Sobald das Ziel vorhanden ist, wird sauber zur entsprechenden Überschrift gescrollt.
- Nach spätestens fünf Sekunden wird der Observer automatisch beendet.
Vorteil
Bestehende Direktlinks müssen nicht geändert werden. Das ist besonders praktisch, wenn solche Links bereits in PDFs, E-Mails oder externen Dokumenten verwendet werden.
Es müssen außerdem keine zusätzlichen manuellen Sprunganker bei den einzelnen Überschriften angelegt werden.
Einsatz
Das Snippet kann universell auf Elementor-Seiten verwendet werden, auf denen das Inhaltsverzeichnis-Widget zum Einsatz kommt und direkte Links zu den automatisch erzeugten TOC-Ankern benötigt werden.