ウィンドウのスクロール位置を保持したままページ遷移する方法

プログラミング

ウィンドウのスクロール位置を保持したままページ遷移する方法を調べていまして、ざっくり次のような方法で対応してみました。

まずこちらが遷移前ページの html 。リンク押下時の window スクロール位置を取得して、get パラメータとして渡します。(ここを post なりセッションに入れるなりはお好みで。)

<script type="text/javascript">
savePosToNextPage = function() {
    xpos = document.documentElement.scrollLeft || document.body.scrollLeft;
    ypos = document.documentElement.scrollTop || document.body.scrollTop;
    location.href = "next.php?xpos=" + xpos + "&ypos=" + ypos;
}
</script>

<a href="javascript:;" onClick="savePosToNextPage();">ページ移動する</a>

こちらが遷移後のページ(PHP の場合)。get パラメータで渡されたスクロール位置を取得して、ページ読み込み後にその位置に windows をスクロールさせます。

$xpos = $_GET['xpos'];
$ypos = $_GET['ypos'];

<script type="text/javascript">
window.onload = function(){
    window.scroll(<?php echo $xpos;>, <?php echo $ypos;>);
}
</script>

これで動作的には概ね求めていたものができましたが、何かベタで古くさい感じが否めないような・・・。

他にもっとスッキリした方法あるんでしょうかね?

photo credit: Dmitry Baranovskiy via photopin cc

フリーランスの Web 系エンジニアで、主に Web サイト制作やシステム・アプリケーション開発を仕事にしています。
好きな事は高校野球、将棋、インターネット、子どもと遊ぶ、食べること。
>>詳しいプロフィールはこちら



フォローする