tornare alla stessa posizione tornando con scrolling infinito

Question

Voglio implementare una funzionalità in cui, facendo clic sul pulsante Indietro, torno nella stessa posizione. Un buon esempio potrebbe essere http://www.jabong.com/men/clothing/mens-t-shirts/. Qui, se si scorre verso il basso e si preme su un prodotto e si fa clic indietro dalla pagina del prodotto, si raggiunge la stessa posizione della pagina in cui si trova quel prodotto.

L'esempio mostrato qui non aggiunge nulla nell'URL per ricordare la posizione. Inoltre, non usa pushstate o history.js (non si carica attraverso ajax).

Qualche idea su come posso fare questo?

MODIFICA: Im utilizzando l'impaginazione a scorrimento infinito (come pinterest) e le pagine continuano a essere caricate scorrendo verso il basso. Quando torno, la query viene eseguita nuovamente e ricarica la pagina. Se ero sulla quarta pagina prima, dopo essere tornato indietro, le pagine non si caricano fino a pagina 4 e quindi c'è una pausa, quindi non posso raggiungere quella posizione.

Quindi la mia domanda è: come faccio a farlo con lo scrolling infinito?

Answer 1

Se è possibile utilizzare JQuery nell'applicazione. Puoi provare WayPoint Plugin è molto semplice da usare e dalla tua domanda, penso che sia quello che stai cercando.

Ecco un esempio Infinito scorrimento e di come funziona:

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

prendere anche uno sguardo a questi tutorial per lo scorrimento infinito utilizzando vari altri plugin, è possibile utilizzare che mai uno adatto alle proprie esigenze le migliore.

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

EDIT:

Se la vostra ricerca per ripristinare la posizione in cui l'utente ha lasciato fuori con scorrimento infinito utilizzando il tasto indietro, questo è un po 'più complicato e richiede un po' di lavorare su la tua parte e come vengono generati i tuoi dati. Si prega di dare un'occhiata a una domanda simile qui:

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

Answer 2

Ho avuto lo stesso problema e la situazione era molto simile: nessun segnalibro o parametri modificati sull'URL.

Ecco la mia soluzione e funziona:

1) È possibile utilizzare window.history.go(-1) o window.history.back(), che è lo stesso pulsante indietro del browser, per navigare alla pagina precedente.

2) Quando si utilizza questa funzione, per qualche motivo potrebbe non tornare alla posizione dell'ultima pagina (ad esempio, selezionare un'immagine nella parte inferiore della pagina e reindirizzare alla pagina successiva. indietro ', torna all'inizio della pagina precedente). In questo caso, è necessario impostare il valore di scorrimento corrente var currentScrollYonSession = window.scrollY nella sessione o in un altro luogo, a seconda del codice, quando l'app reindirizza alla pagina successiva (normalmente è l'evento onClick() o onChange()). Quando fai clic sul pulsante "Indietro" e l'applicazione carica la pagina precedente, controlla innanzitutto la sessione in cui il valore scrollY è nullo o no. Se è nullo, basta caricare la pagina così com'è; in caso contrario, recuperare il valore scrollY, caricare la pagina e impostare il valore scrollY sulla pagina corrente: window.scroll(0, currentScrollYonSession).

Answer 3

mi si avvicinò con una soluzione per la mia app per raggiungere questo obiettivo:

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

Questo utilizza LocalStorage per salvare il numero di pixel che siamo giù dalla parte superiore della pagina.

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

Il caricamento iniziale della pagina ha 30 foto con caselle di classe. La mia impaginazione inizia cliccando su btn con photosbtn di classe.