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

ウィンドウのスクロール位置を保持したままページ遷移する方法を模索していたんですが、今回次のような方法で対処してみたのでご参考までに。

まず、こちらが遷移前ページの html ソースの一部です。

<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:void(0);" onClick="savePosToNextPage();">ページ移動する</a>

リンク押下時の window スクロール位置を JavaScript の scrollTopscrollLeft で取得し、URL のクエリパラメータに付けて次ページに引き渡します。(ここを get、post なりセッションに入れるなり・・・はそのサイトの仕組みに応じて。)

こちらが遷移後のページ(PHP を使用しているケースとなります)。

get パラメータで受け取ったスクロール位置を取得して、ページ読み込み後にその位置まで window をスクロールさせます。

<?php
$xpos = $_GET['xpos'];
$ypos = $_GET['ypos'];
?>

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

どうも処理がベタでイケてない感じが否めませんでしたが、動作的に考えていたものができましたので、この時はひとまず OK としました。

他にもっとスッキリした方法があったらぜひ教えてください。

JavaScript コードレシピ集

JavaScript コードレシピ集

株式会社ICS 池田泰延, 株式会社ICS 鹿野壮
3,114円(10/30 20:51時点)
発売日: 2019/01/25
Amazonの情報を掲載しています

この記事を書いた人

ko31

岩手県出身、群馬県在住のフリーランスWeb系エンジニアです。
Webシステム・アプリ、Webサービス、WordPress開発等を雑多にこなしています。バンカラ応援好きの振り飛車党。
PHP / WordPress / 高校野球 / 将棋 / WordPress / ブログ / 食べること / 二児の父親

>>もっと詳しいプロフィールはこちら

お仕事のご相談・お問い合わせ

Gosign(ゴーサイン)という屋号でフリーランスの Web エンジニアとして活動しています。
当ブログでの掲載内容はもちろん、Web サイト制作や Web アプリケーション開発などのご相談・ご質問がありましたが、お気軽にお問い合わせください!

合わせて読みたい記事