historia pushState i pozycja przewijania

Question

Próbuję pobrać pozycję przewijania, gdy użytkownik nawiguje wstecz w historii przeglądarki przy użyciu obsługi popstate HTML5.

Oto co mam:

$(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> 

Kiedy nawigować wstecz, nie jestem w stanie pobrać wartości stateData.

Przypuszczam, że dzieje się tak dlatego, że popstate pobiera wartości początkowego załadowania strony, a nie stanu, który przekazałem do historii po kliknięciu hiperłącza.

Jak mogę uzyskać przewijanie pozycji podczas nawigacji z powrotem?

Answer 1

udało mi się rozwiązać ten jeden sobie:

Musimy zastąpić dotychczasowy stronę historii stosie przed przejściem do nowej strony.

To pozwala nam zachować pozycję przewijania, a następnie włóż ją ze stosu, gdy nawigacja powrotem:

$('#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

Znajdź sposób, aby to bardziej dynamiczny z jQuery, nadzieję, że może to pomóc:

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

tutaj rozwiązanie bez 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); 
} 

To będzie apelować stan Historia dla każdego c Lick na link z klasą lienDetail dla listy wyników, na przykład