Javascript:submitした時の位置情報を取得し、ロード時に表示位置を指定する

HTMLのフォームでsubmitした場合、ロードした画面の表示スクロール位置はリセットされてページの先頭が表示されます。
submitした時の表示位置のまま、ページロード後もスクロール位置を変更しないで表示したい場合があります。

今回はJavascriptsubmitした時の位置情報を取得し、ロード後の画面でsubmitした時のスクロール位置を変更しないで表示する方法を記載します。


Javascriptでブラウザの位置情報を取得し、ロード時に表示位置を指定

下記で縦と横の位置情報を取得します。


<script type="text/javascript">
    x = document.documentElement.scrollLeft || document.body.scrollLeft;
    y = document.documentElement.scrollTop || document.body.scrollTop;
</script>

submit時に取得した位置情報をhiddenに格納し、データをPOSTします。
 
 
画面ロード時に送信した位置情報で画面のスクロール位置を指定します。
onloadイベントで表示スクロール位置を設定しています。


<script type="text/javascript">
window.onload = function(){
    window.scroll(<?php echo $data['x']; ?>, <?php echo $data['y']; ?>); 
}
</script>

上記の方法で値を取得しておけば、ロード時に表示位置を変更せず画面を表示することができます。
位置情報はphpでechoしています。


  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です