kommen auf die gleiche Position beim Zurückgehen mit unendlichen Scrollen

Question

Ich möchte eine Funktionalität implementieren, in dem auf den Zurück-Button, ich komme zurück an die gleiche Position. Ein gutes Beispiel kann http://www.jabong.com/men/clothing/mens-t-shirts/ sein. Wenn Sie hier nach unten blättern und ein Produkt ankreuzen und von der Produktseite zurückklicken, erreichen Sie dieselbe Position auf der Seite, auf der sich das Produkt befindet.

Das hier gezeigte Beispiel hängt nichts an die URL an, um sich an die Position zu erinnern. Es verwendet auch nicht den Befehl "pressstate" oder "history.js" (wird nicht über Ajax geladen).

Irgendwelche Einblicke, wie ich das tun kann?

EDIT: Ich benutze unendlich scrollen Paginierung (wie pinterest), und die Seiten laden beim Scrollen nach unten. Wenn ich zurück gehe, wird die Abfrage erneut ausgeführt und lädt die Seite neu. Wenn ich auf der 4. Seite war, nachdem ich zurück gegangen bin, werden die Seiten erst auf Seite 4 geladen und es gibt eine Pause, also kann ich diese Position nicht erreichen.

Also meine Frage ist, wie mache ich das mit unendlichem Scrollen?

Answer 1

Wenn Sie JQuery in Ihrer Anwendung verwenden können. Sie können versuchen, WayPoint Plugin ist sehr einfach zu bedienen und von Ihrer Frage, ich denke, das ist, was Sie suchen.

hier ist ein Beispiel Infinite Scrolling und wie es funktioniert:

http://imakewebthings.com/jquery-waypoints/shortcuts/infinite-scroll/

Auch bei diesen Übungen für unendliche Scrollen einen Blick verschiedene andere Plugins verwenden, können Sie verwenden, die je einen der Ihren Bedürfnissen entspricht die Beste.

http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/

EDIT:

Wenn Ihr auf der Suche den Speicherort wiederherstellen, wo der Benutzer mit unendlichem blättern mit der Zurück-Taste links ab, das ist ein wenig komplizierter und erfordert einige auf mehr arbeiten Ihr Teil und wie Ihre Daten generiert werden. Bitte werfen Sie einen Blick auf eine ähnliche Frage hier:

Is it possible to write an "Infinite Scroll" javascript that can handle the back button?

Answer 2

Ich habe das gleiche Problem und die Situation war ziemlich ähnlich: kein Lesezeichen oder Parameter geändert auf der URL.

Hier meine Lösung ist und es funktioniert:

1) Sie window.history.go(-1) oder window.history.back() verwenden können, die die gleiche wie Back-Button im Browser ist, zur vorherigen Seite zu navigieren.

2) Wenn Sie diese Funktion verwenden, ist sie aus bestimmten Gründen nicht an der Position auf Ihrer letzten Seite (z. B. ein Bild am unteren Rand der Seite und es wird zur nächsten Seite weitergeleitet. Wenn Sie auf 'klicken Zurück ', geht es zurück zum Anfang der vorherigen Seite. In diesem Fall müssen Sie den aktuellen scrollY-Wert var currentScrollYonSession = window.scrollY auf der Sitzung oder an einem anderen Ort festlegen, abhängig von Ihrem Code, wenn die App zur nächsten Seite umleitet (normalerweise ist dies onClick() oder onChange()). Wenn Sie auf die Schaltfläche "Zurück" klicken und die vorherige Seite von der App geladen wird, überprüfen Sie zunächst die Sitzung, dass der Wert scrollY null ist oder nicht. Wenn es null ist, lade einfach die Seite so wie sie ist; Andernfalls rufen Sie den scrollY-Wert ab, laden Sie die Seite und setzen Sie den scrollY-Wert auf die aktuelle Seite: window.scroll(0, currentScrollYonSession).

Answer 3

kam ich mit einer Lösung für meine app, dies zu erreichen: zu speichern, wie viele Pixel sind wir von oben nach unten auf der Seite

$(document).on('click', 'a', function() { 
    var scrollpos = $(window).scrollTop(); 
    localStorage.setItem('scrollpos', scrollpos); 
}); 

Dies verwendet Localstorage.

var scrollplan = function() { 
    var foo = true 
    if ((foo == true) && $('.box').length > 30) { 
     var bar = localStorage.getItem('scrollpos') 
     $("html, body").animate({ scrollTop: bar}, 500); 
    } 
    $('.photosbtn').on('click', function(){ 
     var foo = false 
    }); 
    }; 

Die erste Seitenladung hat 30 Fotos mit Klassenboxen. Meine Paginierung beginnt mit einem Klick auf ein Btn mit Klasse photosbtn.