HTMLのフォームでsubmitした場合、ロードした画面の表示スクロール位置はリセットされてページの先頭が表示されます。
submitした時の表示位置のまま、ページロード後もスクロール位置を変更しないで表示したい場合があります。
今回はJavascriptでsubmitした時の位置情報を取得し、ロード後の画面で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しています。
