history pushStateとスクロールの位置

Question

ユーザーがHTML5 popstateハンドラを使用してブラウザの履歴に戻るときに、スクロールの位置を取得しようとしています。ここで

は私が持っているものです：私は戻って移動すると

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

、私はstateDataの値を取得することができません。

これは、popstateがハイパーリンクがクリックされたときに履歴にプッシュした状態ではなく、初期ページの読み込みの値を取得しているためです。

戻るにスクロール位置を取得する方法を教えてください。

Answer 1

私はこの1つを自分で解決するために管理：

我々は新しいページに移動する前に、履歴スタック上で現在のページを上書きする必要があります。これが役立つことを願って、

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

はjQueryを使って、これはよりダイナミックにする方法を探す：

これは、私たちはスクロール位置を保存し、その後、我々は戻って移動するとき、スタックを、それをオフにポップすることができます

ここ

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

jQueryのない溶液：これは、各Cの履歴状態をプッシュします

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

lienDetailクラスのリンクをクリックして結果のリストを表示してください。