Scrollen zur Position nach Refresh mit Animation oä.

  • Hallo an alle und ein Frohes Neues erstmal :)


    meine Frage ist, wenn man zb. unten auf einer Seite ist, und auf einen Button klickt (in dem Fall ein Upload Button, der ein Serverrequest rausschickt) und er dann die Seite Refresht, kommt er nach dem Laden zu der Position wieder hin, wo der button ist, so soll es auch sein.. Aber mein Problem ist ein Schönheitsproblem, und zwar, nach dem Refrehs/Laden zeigt er kurz die Seite oben und Springt schnell nach unten zu der Position, ist nicht schön, gibt es da eine Möglichkeit, das es vielleicht animiert wird und er schöner runterscrollt nach dem Refresh danach, oder ähnliches ?!


    vielen dank im voraus für Ideen, Ratschläge und Hilfen :)


    LG:)

  • Das ist so nicht realisierbar. Wenn die Seite neu geladen wird, wird diese immer zuerst von oben nach unten aufgebaut. Erst wenn die Sprungmarke existiert, wird dorthin gesprungen. Ob gescrollt oder nicht hat wieder mit anderen Dingen zu tun.


    Warum schickst Du den Request nicht asynchron per AJAX bspw.?

    Dann lädt die Seite erstmal nicht neu. Sollte eine Rückgabe visuell dargestellt werden, kannst Du die Response per JavaScript verarbeiten und ins DOM hängen.

  • Wenn in der URL ein Hash (hinter der Raute #) festgestellt wird, wird nach dem vollständigen Laden des Dokuments zu einem Element mit der ID des Hashes gesprungen.


    Du kannst den Hash mit Javascript mit der Eigenschaft window.location.hash maniuplieren. Siehe: https://www.w3schools.com/jsref/prop_loc_hash.asp


    Den Wert solltest du jedoch speichern. Dieses Script muss vor dem Body, bestenfalls also im Head Bereich stehen:

    JavaScript
    // Get and reset hash value BEFORE DOM loads.
    let hash;
    
    hash = window.location.hash;
    
    if("" !== hash)
    {
        window.location.hash = "";
    }


    Meine Scripts lade ich immer am unteren Ende des Bodys, dieser Code funktioniert aber auch im Head, solange jQuery vorher geladen wurde:


    Um animate nutzen zu können, muss die uncompressed oder minified Version von jQuery genutzt werden. In der slim Variante sind Animationen nicht integriert.


    Ein zusammenhängendes Beispiel: https://pastebin.com/NDHV6Adp


    Wie Arne Drews schon sagte, macht so eine Formularauswertung mittels AJAX aber wirklich mehr her und ist eher zeitgemäß.

  • Ich hatte ihn das so vorgeschlagen

    Nach den reload wird getestet ob die Seite vorher gescrollt wurde. Deswegen $('body').scrollTop();

    Ist der Wert über 10px springt er sofort nach oben und scrollt da hin wo er sein sollte.

    Funktioniert auch. Sind zwar alles nur Tricks, aber ohne die geht es wohl nicht.


    ScrollPos ist gleichzeitig die Animate Zeit damit egal wie hoch der Body ist immer ungefähr gleich schnell scrollt.

    Wem es nicht gefällt kann ja auch nee feste Zeit da rein schreiben. Sieht aber auch doof aus wenn man 10.000 Pixel in einer Halben Sekunden Scrollt. Obwohl bei mir wären das 10 Sekunden ,ist auch etwas lang.

    Naja das muß halt jeder selber wissen was man da macht.

  • Der Hash in der URI verweist auf einen Ankerpunkt im Dokument.

    Dass das Dokument sequentiell aufgebaut wird, hatte ich bereits angesprochen. Das kann also nur funktionieren, wenn das Ankerelement bereits geladen wurde und im DOM existiert.


    Die Seite wird weiterhin zuerst "oben" angezeigt, das lässt sich nicht verhindern!

    Das Scrolling kann man mit JS natürlich smooth machen, aber ich tendiere immer noch dazu, die Seite nicht neu zu laden.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!