プログラミング

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

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

<br />
&lt;script type=&quot;text/javascript&quot;&gt;<br />
savePosToNextPage = function() {<br />
    xpos = document.documentElement.scrollLeft || document.body.scrollLeft;<br />
    ypos = document.documentElement.scrollTop || document.body.scrollTop;<br />
    location.href = &quot;next.php?xpos=&quot; + xpos + &quot;&amp;ypos=&quot; + ypos;<br />
}<br />
&lt;/script&gt;</p>
<p>&lt;a href=&quot;javascript:;&quot; onClick=&quot;savePosToNextPage();&quot;&gt;ページ移動する&lt;/a&gt;<br />

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

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

<br />
$xpos = $_GET['xpos'];<br />
$ypos = $_GET['ypos'];</p>
<p>&lt;script type=&quot;text/javascript&quot;&gt;<br />
window.onload = function(){<br />
    window.scroll(&lt;?php echo $xpos;&gt;, &lt;?php echo $ypos;&gt;);<br />
}<br />
&lt;/script&gt;<br />

動作的に考えていたものができましたので、ひとまずはこれで OK です。

ただ、書き方がどうもベタでイケてない感じが否めないような・・・。他にもっとスッキリした方法があったら教えてください。

photo credit: Dmitry Baranovskiy via photopin cc