web-dev-qa-db-ja.com

履歴pushStateとスクロール位置

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

これが私が持っているものです：

$(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が最初のページ読み込みの値を取得しており、ハイパーリンクがクリックされたときに履歴にプッシュした状態ではないためだと思います。

戻るときにスクロール位置を取得するにはどうすればよいですか？

javascriptjqueryhtmlpushstatehtml5-history
15
George Filippakos

私はこれを自分で解決することができました：

新しいページに移動する前に、履歴スタックの現在のページを上書きする必要があります。

これにより、スクロール位置を保存し、戻ったときにスタックからポップすることができます。

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

    });
22
George Filippakos

JQueryを使用してこれをより動的にする方法を見つけてください。これが役立つことを願っています：

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

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

これにより、たとえば結果のリストについて、lienDetailクラスとのリンクをクリックするたびに履歴状態がプッシュされます。

1
Mathieu Giboulet