Trick # 598 | Dieser Beitrag beinhaltet 443 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Das Divi-Theme hat eine nette Funktion, mit der Sie CSS-IDs als Ankerlinks verwenden können. Bei einem Klick auf einen solchen Link, wird der User direkt zu dem Teil der Seite mit dieser Komponente weitergeleitet. In manchen Fällen kann es vorkommen, dass Ihre Seite zum Ankerlink scrollt, dann aber wieder an den Anfang der Seite springt, bevor sie schliesslich doch zur gewünschten Position auf der Seite zurückscrollt. Heute erfahren Sie, was Sie dagegen tun können.
Den Ankerlink können Sie in jedem Divi-Modul setzen: Bearbeiten Sie das Modul, wechseln Sie auf den Tab «Erweitert», wählen Sie «CSS-ID und Klassen» und geben Sie im Feld «CSS-ID» einen eindeutigen Namen an. Nehmen wir als Beistpiel «jumptothis».
Nun können Sie einen beliebigen Link erstellen: als Adresse wählen Sie https://ihre-domain.ch/seite-mit-der-erstellten-css-id/#jumptothis – schon wird ein Klick auf einen solchen Link ein zielgenaues Scrollen auf das Divi-Element auslösen. Fast immer, jedenfalls. Ab und an streikt aber die Zielgenauigkeit und die Seite wird erst mal wieder ganz hochgescrollt.
Das lässt sich mit einem kleinen Script ausmerzen. Kopieren SIe es in den <head>-Bereich Ihrer Website. Im Backend unter Divi/Theme-Optionen/Integration und dort dem Eingabebereich für die <head>-Inhalte hinzufügen:
<script type="text/javascript">var oldReadyStateChange = document.onreadystatechange;document.onreadystatechange = function () {
if (oldReadyStateChange) {
oldReadyStateChange(); // execute old listener function if it exists
}if (document.readyState === 'complete') {
var oldScrollTo = window.scrollTo;
window.scrollTo = function(){ return false; };
setTimeout(function() {
window.scrollTo = oldScrollTo;
}, 1000);
}
};
</script>Das wirre Sprungverhalten sollte sich so beheben lassen.
Werbung
Werbung
