dojdzie do tej samej pozycji po powrocie z nieskończonym przewijaniem

Question

Chcę zaimplementować funkcję, w której po kliknięciu przycisku Wstecz wracam do tej samej pozycji. Dobrym przykładem może być http://www.jabong.com/men/clothing/mens-t-shirts/. Jeśli przewiniesz w dół i trafisz na produkt, a następnie klikniesz z powrotem na stronę produktu, osiągniesz tę samą pozycję na stronie, na której znajduje się ten produkt.

Podany tutaj przykład nie dodaje niczego w adresie URL, aby zapamiętać pozycję. Ponadto nie używa on funkcji pushstate ani history.js (nie ładuje się przez ajax).

Wszelki wgląd w to, jak mogę to zrobić?

EDYTOWANIE: Używam nieskończonej przewijanie stronicowania (np. Pinterest), a strony są nadal ładowane po przewijaniu w dół. Kiedy wrócę, zapytanie zostanie ponownie uruchomione i ponownie załaduje stronę. Gdybym był na czwartej stronie wcześniej, po powrocie strony nie ładują się do strony 4, a więc jest przerwa, dlatego nie mogę osiągnąć tej pozycji.

Moje pytanie brzmi: jak to zrobić z nieskończonym przewijaniem?

Answer 1

Jeśli możesz używać JQuery w swojej aplikacji. Możesz spróbować WayPoint Plugin jego bardzo prosty w użyciu i na pytanie, myślę, że to jest to, czego szukasz.

tutaj jest przykładem nieskończone przewijanie i jak to działa:

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

wziąć również spojrzeć na te tutoriale dla nieskończonego przewijania stosując różne inne wtyczki, można użyć które kiedykolwiek jeden odpowiedni dla Twoich potrzeb Najlepiej.

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

EDIT:

Jeśli szukasz przywrócić lokalizację, w której użytkownik opuścił mecz nieskończonego przewijania za pomocą przycisku wstecz, jest to trochę bardziej skomplikowane i wymaga trochę więcej pracy na twoja część i jak generowane są twoje dane. Proszę spojrzeć na podobnym pytaniem tutaj:

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

Answer 2

Mam ten sam problem, a sytuacja była bardzo podobna: brak zakładek lub zmieniane parametry adresu URL.

Oto moje rozwiązanie i działa:

1) Można używać window.history.go(-1) lub window.history.back(), która jest taka sama jak przycisk wstecz w przeglądarce, aby przejść do poprzedniej strony.

2) Kiedy używasz tej funkcji, z jakiegoś powodu może ona nie powrócić do pozycji na twojej ostatniej stronie (np. Wybierasz obrazek na dole strony i przekierowuje do następnej strony. przycisk "wstecz", wraca na początek poprzedniej strony). W takim przypadku musisz ustawić bieżącą wartość scrollY var currentScrollYonSession = window.scrollY w sesji lub innym miejscu, w zależności od kodu, kiedy aplikacja przekieruje do następnej strony (zwykle jest to zdarzenie onClick() lub onChange()). Po kliknięciu przycisku "Wstecz", a aplikacja wczytuje poprzednią stronę, najpierw sprawdź sesję, czy wartość scrollY jest pusta, czy nie. Jeśli ma wartość NULL, po prostu wczytaj stronę taką jaka jest; w przeciwnym razie pobierz wartość scrollY, załaduj stronę i ustaw wartość scrollY na bieżącej stronie: window.scroll(0, currentScrollYonSession).

Answer 3

wymyśliłem rozwiązanie dla mojego app do osiągnięcia tego celu:

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

używa localStorage zapisać ilu pikseli jesteśmy w dół z górnej części strony.

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 
    }); 
    }; 

Początkowe ładowanie strony zawiera 30 zdjęć z kartami klas. Moja paginacja zaczyna się od kliknięcia przycisku btn z klasą photosbtn.