Link auf Einkaufswelt mit Anker

Nein, gleiche Einkaufswelt.

In der Einkaufswelt ist oben auch ein art listing mit anker zu alle punkte weiter unten im EKW.

Befinde ich mich im EKW, funktionieren die Ankern im Desktop wie Mobile ansicht.

Linke ich aber von eine andere Seite auf den Anker, oder gebe den URL mit  #xxx direkt ein, geht es im mobile nicht.

Kommando zurück, browsercache hat dazwischen gefunkt, jetzt gehts.

 

Bleibt nur noch das Verzögerungsproblem

Hallo,

ich weiß nicht so recht, ob eine reine „Verzögerung“ hier schon den gewünschten Effekt erzeugt und so wirklich das „Gelbe vom Ei“ ist, da es ja trotzdem sein kann, dass die Einkaufswelt, wo sich das Ankerziel befindet, immernoch nicht komplett darstellt ist. Eine Verzögerung könnte man so erreichen (am Beispiel von 2 Sekunden):

$(document).ready(function() {
     $.subscribe("plugin/swEmotionLoader/onLoadEmotionFinished", function(me) {
          setTimeout(scrollToAnker, 2000);
     });
});

Wahrscheinlich müsste es eher in die Richtung gehen, das man prüft, ob das Ankerziel schon vorhanden ist, ist dies nicht der Fall, dann prüft man es nach x - Sekunden noch einmal, bis das Ankerziel vorhanden ist und macht dann erst den Scrolleffekt.

Grüße

Sebastian

@sschreier‍: Vielen Dank für Deinen Lösungsansatz. Das Problem ist nicht, dass der Anker fehlt. Das Problem ist, dass nachdem zum Anker gescrollt wurde, noch Bilder geladen werden, welche die Ansicht nach unten verschieben.

Könnte man das ganze mit einem onload Event mit Javascript lösen? Also eine Abfrage, ob die Seite bzw. alle Bilder vollständig geladen sind und anschließend erst zum Anker scrollt? Gibt es unter den JavaScript Profis Argumente, die gegen diesen Einsatz sprechen?

In etwa so?
https://stackoverflow.com/questions/11071314/javascript-execute-after-all-images-have-loaded

Über das genutzte Event:

$.subscribe("plugin/swEmotionLoader/onLoadEmotionFinished", function(me) {
    scrollToAnker();
});

sollte die Funktion scrollToAnker eigentlich auch erst dann ausgeführt werden, wenn die Einkaufswelt vollständig geladen ist.
Eigentlich sollten da (zumindest nach meinem Verständnis) auch die Bilder innerhalb der Einkaufswelt enthalten sein.

Ich bin hier nun auch ein wenig ratlos.

Eine Verzögerung ist sicherlich nicht gerade das Gelbe vom Ei. Vielleicht gibt es da ja ein anderes Event welches besser passen würde um die Scroll-Funktion zu triggern.

Hallo,

das Event:

$.subscribe("plugin/swEmotionLoader/onLoadEmotionFinished", function(me) {

});

wird ja bei jeder Einkaufswelt, also bei der ersten bis zu zehnten, ausgeführt und das jedes Mal. Und nur weil eine Einkaufswelt geladen ist, also deren (HTML-)Inhalt, heißt das ja nicht, dass auch schon alle Inhalte entsprechend ausgegeben / an die Auflösung angepasst sind. Das sind zwei paar Schuhe und hat nicht unbedingt etwas damit zu tun (hier müsste man ja auch Bedenken, das wenn die Einkaufswelt noch nicht aus dem Cache geladen wird, sie auch länger zum Laden brauch). Es ist also auch nachvollziehbar, dass ein Scrolleffekt, der schon bei der ersten Einkaufswelt gesetzt wird, an die falsche Stellen scrollen könnte, wenn sich zwischen dem gewünschten Ziel und der ersten Einkaufswelt mehrere andere Einkaufswelten mit Bildern befinden.

Eventuell wäre es denkbar, das es “besser” funktionieren könnte, wenn man den Scrolleffekt erst beim fertig laden der letzten Einkaufswelt setzt (mit dem genannten Event). Dafür gibt es aber kein “weiteres” Event, dies müsste man dann selbst implementieren, da man bei dem Event oben ansich nicht weiß, welche Einkaufswelt es ist und ob es die letzte Einkaufswelt auf der Seite ist.

Und ein “onload” der Bilder würde glaub ich eher zu Problemen, gerade in den reponsiven Ansicht und auch so, führen und würde wahrscheinlich auch nicht das Gelbe vom Ei sein.

Grüße

Sebastian

 

$(document).ready(function() {
    if(location.hash) {
        let allReadyScroll = false;
        $.subscribe("plugin/swEmotionLoader/onLoadEmotionFinished", function(me) {
            if ($(location.hash).length && !allReadyScroll) {
                $("html, body").animate({
                    scrollTop: $(location.hash).offset().top
                }, 100);
                allReadyScroll = true;
            }
        });
    }
});

So läuft es! :slight_smile:

1 Like