JSで切り替えたページにBackで戻れるようにする

ページを読み込み直さずにJavaScriptでタブ切り替えやページャーで表示を変えた場合、そこからリンクをクリック等で別のページに遷移した後にブラウザのBackやhistory.backで戻って来ると、初期表示のページになってしまいます。
そこで、HTML5で導入されたhistory.replaceState()を使って現在の履歴を表示状態を含むものに書き換えて、Backで遷移直前の表示状態に戻れるようにします。

以下、jquery.pajinateを使ったページングがあるページを例に挙げます。

index.html

<div id="link-list">
    <ul class="content">
        <li><a href="path/detail/page1.html">リンク1</a></li>
        <li><a href="path/detail/page2.html">リンク2</a></li>
        ・・・
        <li><a href="path/detail/page29.html">リンク29</a></li>
        <li><a href="path/detail/page30.html">リンク30</a></li>
    </ul>
    <div class="page_navigation"></div>
</div>

<script type="text/javascript" src="/js/jquery.pajinate.min.js"></script>
<script type="text/javascript">
$(function(){
    var total_items = 30;
    var current_page = 1;
    var target_page = 0;
    var total_page = Math.ceil(total_items / 5);
    // ハッシュを元に表示するページを決定
    if (location.hash.match(/^#page-(\d)$/)) {
        if (0 < RegExp.$1 && RegExp.$1 <= total_page) {
            target_page = RegExp.$1 - 1;
        }
    }
    $('#link-list').pajinate({
        items_per_page : 5,
        num_page_links_to_display : 10,
        start_page : target_page,
        onPageDisplayed : function (n) {
            current_page = n;
        }
    });
    $('ul.content>li>a').click(function() {
        // ページ遷移前に履歴上の現在のURLを書き換える
        history.replaceState(null, 'title', location.protocol + '//' + location.host + location.pathname + location.search + '#page-' + current_page);
    });
});
</script>

例えば、index.htmlの2ページ目を見ているとします。
<a href="path/detail/page7.html">リンク7</a>をクリックして遷移する場合、履歴に残る現在のページはindex.htmlですが、history.replaceState()で、ページ番号を含めたハッシュ『#page-2』を追加したものに書き換えています。
履歴が書き換えられたので、page7.htmlに遷移した後にBackで戻ると、index.html#page-2に戻ってくることになり、ハッシュの『#page-2』からtarget_page(0から始まるので1引いています)を決定してstart_pageを指定し、2ページ目が表示されることになります。