[PHP&Javascript]画面のスクロール位置を復元する

Read More

画面の最終スクロール位置を取得しておいて任意のタイミングで復元させる。


これはページ内の予め埋め込まれたアンカータグに飛ぶそれとは根本的に違う。


アンカータグは指定した場所へ飛ぶものであり、
これから説明するものは最終スクロール位置へ"戻す"ものである。



■現在のスクロール位置を取得する
<script type="text/javascript">
<!--
function getScrollPosition($axis) {
 if($axis=='x') {
  return document.documentElement.scrollLeft || document.body.scrollLeft;
 }else if($axis=='y') {
  return document.documentElement.scrollTop || document.body.scrollTop;
 }// end if
}// end function
//-->
</script>


第一引数には"x"軸か"y"軸かを指定する。
最終的な画面位置をこれで取得することができる。



■スクロール位置を復元する
<script type="text/javascript">
<!--
window.scroll($x,$y);
//-->
</script>


位置を復元するにはwindow.scroll()を利用する。
これを呼び出すタイミングはページ遷移後。
bodyタグのonload()とかで良い。



上記2つのコードが受け渡しのキモ。



例えば、隠しパラメータとして
<input type="hidden" name="x" value="" />
<input type="hidden" name="y" value="" />
を用意し、submit直前でこれにx軸y軸を格納してやる。


submit先のページで値を$_SESSION['x']などに入れておいてやれば、復元したい画面で利用することができる。




自分の場合はPHPの自作クラスを利用している為、復元部分は以下のような形になっている。
<script type="text/javascript">
<!--
$(function(){
	var $x;
	var $y;
	$x = <?=SessionClass::newInstance()->remove('x', 0)?>;
	$y = <?=SessionClass::newInstance()->remove('y', 0)?>;
	if($x || $y) {
		window.scroll($x,$y);
	}// end if
});
//-->
</script>

$(function())はjQueryの提供する機能で、DOMの構築が完了した時点で中のコードが実行される。


SessionClass::newInstance()->remove('x', 0)は簡単にいうと、
$_SESSIONの中にxキーがあればそれを返却し、要素がなければ0を返却する、
という動きをする。


最後のif()でx軸y軸のいずれかに値が入っていればスクロール位置を調整する。


スクロール調整が実行されると画面が一瞬動くのが見えるが、
それはアンカータグでも同じことが起こるので気にしない。



--
余談だが上記のjavascriptの中で変数の頭に"$"(ドルマーク)をつけているがこれに深い意味はない。


PHPで変数を扱う際、先頭に"$"を付けるのでこれと同じ見え方にした方が"変数"と認識しやすいと思ったのでこうしているだけ。


ただjQueryでは"$"に特別な意味を持たせてあるのでVerが上がれば弊害が出てくることがあるかもしれない。
他のライブラリでも"$"に機能を付与しているものがあるので"$"を使う際はこの点は意識しておく必要がある。
# 現時点で問題が起こったことはない