![プログラミング](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480"><rect fill-opacity="0"/></svg>)
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96"><rect fill-opacity="0"/></svg>){kind=avatar}
ko31 ![プログラミング](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="546" height="409"><rect fill-opacity="0"/></svg>)
ウィンドウのスクロール位置を保持したままページ遷移する方法を調べていまして、今回次のような方法で対応してみたのでメモしておきます。
まず、こちらが遷移前ページの html の一部です。
1 2 3 4 5 6 7 8 9 | <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> |
リンク押下時の window スクロール位置を scrollTop、scrollLeft で取得して、get パラメータで次ページに引き渡します。（ここを post なりセッションに入れるなりはそのサイトに応じて。）
こちらが遷移後のページ（PHP の場合）。get パラメータで渡されたスクロール位置を取得して、ページ読み込み後にその位置まで windows をスクロールさせます。
1 2 3 4 5 6 7 8 | $xpos = $_GET['xpos'];$ypos = $_GET['ypos'];<script type="text/javascript">window.onload = function(){ window.scroll(<?php echo $xpos;>, <?php echo $ypos;>);}</script> |
動作的に考えていたものができましたので、ひとまずはこれで OK です。
ただ、書き方がどうもベタでイケてない感じが否めないような・・・。他にもっとスッキリした方法があったら教えてください。
photo credit: Dmitry Baranovskiy via photopin cc
