ウィンドウのスクロール位置を保持したままページ遷移する方法を模索していたんですが、今回次のような方法で対処してみたのでご参考までに。
まず、こちらが遷移前ページの 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 の scrollTop
、scrollLeft
で取得し、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 としました。
他にもっとスッキリした方法があったらぜひ教えてください。