- 締切済み
PHP画面遷移でスクロール位置を保持する
いつもお世話になっております。 現在、PHP+MySQLでWebアンケートを制作中です。 画面遷移で、アンカーではなくスクロール位置を保持し、 正確に前ページのsubmitボタンを押した時点での表示状態に 戻したいです。 ＜詳細＞ q.phpはアンケートフォームです。 send.phpはエラーチェックとDB登録のモジュールです。 comp.phpは（正常に）完了したことを知らせるメッセージページです。 q.phpは、設問数が多いため、アンケートの途中途中に「保存ボタン」を用意しています。 どのタイミングで、どの保存ボタンを押すかは、 途中まで回答していたり、所々回答していたり、全く回答していなかったりと、 いろんなパターンがあると思います。 保存ボタンを押すと、send.phpに移動します。 そこでは、未回答やおかしな点がないかチェックしながら、 その都度、その時点での回答内容がDBに保存されます。 問題（未回答やエラーが）なければ、 comp.phpに移動し、終了のメッセージを表示しますが、 問題がある場合は、q.phpに戻り、問題のある箇所を赤でハイライト等で表示し直します。 このときに、最初にq.phpのsubmitを押した時点と同じ表示状態に戻したいのです。 q.phpにある複数のsubmit（class名、action先はすべて同じ）ボタンを押したときの スクロール情報を変数に格納し、移動先のsend.phpで保持し、（問題あり時に）q.phpに その値を返し、表示位置を同じにするという仕組みを知りたいです。 本番まで日数がないため、最も簡単に実装できる方法をご教授下さい。 なお、ttp://xirasaya.com/?m=detail&hid=175 を読みましたが、 html（PHP？）ソースコードへの実装方法、 javascriptとphpのデータの受け渡し方法等が 不明で実現できませんでした。 また、アンケートを実施（回答）する対象者のブラウザは、ほとんどが、IE6かIE7です。
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- bm_hiro
- ベストアンサー率51% (200/388)
- bm_hiro
- ベストアンサー率51% (200/388)
- bm_hiro
- ベストアンサー率51% (200/388)
もう ちゃんと見直してから送信しろって話ですが、さっきのスクリプト一部間違えました。ごめんなさい。 ↓誤りです。自分に戻しちゃってますが、q.php にしといてください。 print "<form action='send.php#{$back}' method=post>\n";
お礼
訂正ありがとうございます。
補足
OKWAVEの機能に、自己レスがないので、こちらに失礼します。 No.4の回答の補足に記載の問題は、なんとか自力で解決しました。 ご回答頂いた内容で、質問に対する直接的な解決にはたどりつけなかったので、 ベストアンサーは”無し”で質問を締め切ります。 お答え頂き、ありがとうございました。
- bm_hiro
- ベストアンサー率51% (200/388)
とりあえず、ざっくりと ゴリゴリと書いてみました。 IE6で動くかどうかは分りません。検証できるものがないもので。 ちなみに、JavaScriptは必要性を感じなかったので、使用していません。 HTMLタグの<a name> で飛ばし先を決めてるだけです。 q.php ----- <html> <body> <?php print "<form action=send.php method=post>\n"; for($i=1;$i<10;$i++) { print "<hr>"; print "<a name=Quest{$i}>質問 $i\n"; print str_repeat("<br>" , 10); print "<input type=submit name=Submit[$i] value='保存ボタン'>\n"; } print "</form>\n"; ?> <body> </html> ----- send.php ----- <html> <body> <?php $DimSubmit = $_POST['Submit']; $DimSubmit = array_flip($DimSubmit); $num = $DimSubmit['保存ボタン']; print "質問 No.{$num}から飛んできたよ。<hr>"; $back = "Quest{$num}"; print "質問 No.{$num}に戻るよ。<hr>\n"; print "<a href=q.php#{$back}>[ 戻る ]\n"; print "<form action='send.php#{$back}' method=post>\n"; print "<input type=submit value='戻る'>\n"; print "</form>\n"; ?> <body> </html> -----
お礼
ご教示の方法ですと、正確には戻れませんよね？ 各質問は等間隔ではありません。また、保存ボタンも1問ずつ設置しておりません。 どちらかというと標準サイズのモニタに表示可能な1画面に１つはボタンが見える感じです。 しかし、回答者はいつボタンを押すかわかりません。 （画面中央付近で回答中に、上部にあるボタンを押す人もいれば、下部にあるボタンを押す人もいる e.t.c...） よって、より正確に戻してやる必要があります。
お礼
回答ありがとうございます。 試してみましたが、動きませんでした。 昨日からWebサイトの情報を見尽くしましたが（たぶん）、この挙動実現するための情報（javascript）は、該当部分のソースコードは載っていましたが、肝心の要の諸設定情報まではありませんでした。 ですので、自分で試行錯誤しながら「補足」のとこまでたどりつきました。
補足
現在、jqueryを導入し各ファイル間で値の受け渡しまで成功しています。 （q.phpでscrollTop取得し、input hiddenでsend.phpにPOST送信。 input hiddenでは、POST受信したy座標値をSESSIONへ保存。 アンケートの回答内容にエラーがあれば、q.phpに戻り、SESSIONにある y座標の値で・・・・・・・onloadするだけのはずが） onloadだけができません（動きません） 試しにphpのprintでSESSIONの値を書かせると、 きちんとsubmitボタンを押した時点のy座標が表示される。 該当するjavascriptはbody内に <?php if(isset($_SESSION['scrollY'])){ print $_SESSION['scrollY'];?> <script type="text/javascript"> document.onload = function(){ document.body.scrollTop = "<?php echo $scrollY; ?>"; } </script> <?php } ?> として記入。 ご指摘をお願いします。