Wie kann ich behalten Sie die scroll-position des scrollbaren Bereichs beim drücken der zurück-Taste?

Ich habe eine lange Liste von links in einem großen, scrollbaren div. Jedes mal, wenn ein Benutzer auf einen link klicken, dann klicken Sie auf die Schaltfläche zurück, es beginnt an der Spitze der div. Es ist nicht benutzerfreundlich für unsere Nutzer. Irgendwelche Möglichkeiten, damit der browser einen Bildlauf zu der vorherigen position beim drücken der zurück-Taste?

Vielen Dank!

Check diesen link ... stackoverflow.com/questions/2009029/...
speichern der position in cookies und nach, dass die Verwendung der Cookies zu scrollen die Seite, um die exakte position .

InformationsquelleAutor user2335065 | 2015-03-23

  1. 13

    Während Seite entladen, Holen Sie sich die scroll-position und speichern Sie es in den lokalen Speicher. Dann beim laden der Seite, überprüfen Sie die lokalen Speicher und festlegen, dass die scroll-position. Vorausgesetzt, Sie haben ein div-element mit der id element. Falls es für die Seite, ändern Sie bitte die Auswahl":) 

    $(function() {
   $(window).unload(function() {
      var scrollPosition = $("div#element").scrollTop();
      localStorage.setItem("scrollPosition", scrollPosition);
   });
   if(localStorage.scrollPosition) {
      $("div#element").scrollTop(localStorage.getItem("scrollPosition"));
   }
});
    Danke! Es ist gut, aber noch eine kleine Sache. Wenn Sie auf zurück klicken, wird der browser erste beginnt an der Spitze, und springen Sie zu der position, die nach 0,5 Sekunden. Jeder Weg, um eine Verkürzung der time-lapse, so dass es glatter?
    Es ist, weil der code wird ausgeführt, nachdem das dom geladen ist. Das ist, warum gibt es eine Verzögerung. Statt den code in domContent geladen. Sie können versuchen, $("div#element").load(function() {}) und platzieren Sie das element außerhalb der document-ready-handler.
    Auch, wenn ein Benutzer nach unten scrollen die Seite, dann verlassen Sie die Seite, und gehen Sie zurück zu der Seite wieder, es sollte ein neuer Anfang für ihn, so sollte es beginnen, an der Spitze. Aber jetzt ist es auch an der vorherigen position. Einen Weg dies zu verhindern? 🙂
    Fügen Sie eine weitere Bedingung Prüfen $(window).scrollTop (); " und sehen, ob es über 650. In diesem Fall speichern Sie nicht die scrollPosition in der lokalen Speicher 🙂
    Auch wenn die $(window).scrollTop(); oberhalb von 650, entfernen Sie die scrollPosition aus dem lokalen Speicher als auch.

    InformationsquelleAutor mohamedrias

  2. 2

    Ich hatte das gleiche problem, mit einer einfachen Benutzeroberfläche, die aus einem festen Menü-div und einem Scroll-Dokument-div ("pxeMainDiv" im code-Beispiel unten). Die folgende Lösung funktioniert bei mir in Chrome 47.0.2526.106 m und in Firefox 43.0.3. (Meine Anwendung ist für den Einsatz im Haus und ich brauchte nicht zu sorgen für die alten IE-Versionen).

    $(document).ready(function(){
    if (history.state) {
       $("#pxeMainDiv").scrollTop(history.state.data);
    }
    $("#pxeMainDiv").scroll(function() {
       var scrollPos = $("#pxeMainDiv").scrollTop();
       var stateObj = { data: scrollPos };
       history.replaceState(stateObj, "");
    });
});

    Auf der div-scroll-Ereignis, das die scroll-position des div-Element gespeichert ist, in den Zustand Objekt in der browser-history-Objekt. Nach einem drücken der Schaltfläche Zurück, auf die document-ready-event, das die scroll-position des div-wiederhergestellt wird, auf dem Wert abgerufen, aus der Geschichte.state-Objekt.

    Diese Lösung sollte funktionieren, für die reverse-navigation eine beliebig lange Kette von links.

    Dokumentation hier: https://developer.mozilla.org/en-US/docs/Web/API/History_API

    InformationsquelleAutor G Stokes

  3. 1

    Ich denke, wir sollten sparen, scroll-Daten pro Seite, auch sollten wir verwenden session-Speicher statt lokaler Speicher da der session-storge-Effekte nur die aktuelle Registerkarte, während die lokale Speicherung geteilt zwischen allen tabs und Fenstern von der gleichen Ursprungs

    $(function () {
            var pathName = document.location.pathname;
            window.onbeforeunload = function () {
                var scrollPosition = $(document).scrollTop();
                sessionStorage.setItem("scrollPosition_" + pathName, scrollPosition.toString());
            }
            if (sessionStorage["scrollPosition_" + pathName]) {
                $(document).scrollTop(sessionStorage.getItem("scrollPosition_" + pathName));
            }
        });
    Dies funktioniert sehr schön.

    InformationsquelleAutor Jondi

  4. 0

    Wenn eine zurück-Schaltfläche ist eine Art Geschichte zurück-Taste window.history.back() Dann, was Sie suchen, ist eine Standard-browser-Funktionalität. So dass Sie nicht haben, um über sorgen es.

    Wenn Ihr zurück-Taste tatsächlich ein URL in Ihrer Anwendung via link oder Formular, dann müssen Sie aufpassen, dass Sie manuell.

    Für die Lösung, die Sie verwenden möglicherweise cookies, um Ihre scroll-Seite Wert. Jedes mal, wenn Benutzer Blättern auf Ihrer Seite, sparen Sie Blättern Wert für die Seite in ein cookie. Extra Arbeit aufgetragen wird, um die manuelle Verwaltung von Cookies.

    window.onScroll = function(){
    document.cookie="pageid=foo-"+window.scrollY+";";
}

    Dieser cookie-Wert zum einstellen des scroll-Wert der Seite auf Seite besuchen.

    window.scroll(0,cookievalue);

    InformationsquelleAutor SD.

Schreibe einen Kommentar