history pushState e scroll position

Question

Sto cercando di recuperare la posizione di scorrimento quando un utente torna indietro nella cronologia del browser utilizzando il gestore popstate HTML5.

Ecco quello che ho:

$(document).ready(function() { 

    $(window).on('popstate', PopStateHandler); 

    $('#link').click(function (e) { 

     var stateData = { 
      path: window.location.href, 
      scrollTop: $(window).scrollTop() 
     }; 
     window.history.pushState(stateData, 'title', 'page2.html'); 
     e.preventDefault(); 

    }); 

}); 

function PopStateHandler(e) { 
    alert('pop state fired'); 
    var stateData = e.originalEvent.state; 
    if (stateData) { 
     //Get values: 
     alert('path: ' + stateData.path); 
     alert('scrollTop: ' + stateData.scrollTop); 
    } 
} 


<a id="link" href="page2.html"></a> 

Se navigando indietro, sono in grado di recuperare i valori della stateData.

Suppongo che ciò sia dovuto al fatto che il popstate recupera i valori del caricamento iniziale della pagina e non lo stato che ho inviato alla cronologia quando è stato fatto clic sul collegamento ipertestuale.

Come posso ottenere la posizione di scorrimento sulla navigazione indietro?

Answer 1

sono riuscito a risolvere questo uno io:

Dobbiamo sovrascrivere la pagina corrente sullo stack storia prima la navigazione verso la nuova pagina.

Questo ci consente di memorizzare la posizione di scorrimento e poi pop dallo stack quando navighiamo indietro:

$('#link').click(function (e) { 

     //overwrite current entry in history to store the scroll position: 
     stateData = { 
      path: window.location.href, 
      scrollTop: $(window).scrollTop() 
     }; 
     window.history.replaceState(stateData, 'title', 'page2.html'); 

     //load new page: 
     stateData = { 
      path: window.location.href, 
      scrollTop: 0 
     }; 
     window.history.pushState(stateData, 'title', 'page2.html'); 
     e.preventDefault(); 

    }); 

Answer 2

trovare un modo per rendere questo più dinamico con jQuery, spero che questo può aiutare:

$(".lienDetail a").on('click',function(){ 
    history.pushState({scrollTop:document.body.scrollTop},document.title,document.location.pathname); 
} 

qui la soluzione senza jQuery:

function pushHistory(e){ 
    e = e || window.event; 
    var target; 
    target = e.target || e.srcElement; 
    if (target.className.match(/\blienDetail\b/)){ 
     history.pushState({scrollTop:document.body.scrollTop},document.title,document.location.pathname); 
    } 
} 

if (document.body.addEventListener) 
{ 
     document.body.addEventListener('click',pushHistory,false); 
} 
else 
{ 
    document.body.attachEvent('onclick',pushHistory); 
} 

Questo spingerà stato della storia per ogni c lecco il link con la classe lienDetail per l'elenco dei risultati, ad esempio