質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1942閲覧

formでsubmitした時,formの先頭までスクロールした状態で表示されるようにしたい

sakura-shi

総合スコア93

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/05/30 06:15

編集2018/05/30 06:45

## 実現したいこと
formでsubmitした後、ページ内の指定の場所が先頭に表示されるようにしたい。
たとえば、コードのように、同じページにformが複数あり、1番目のフォームでsubmitした時は

<h1>TITLE No1</h1>

が、画面の先頭に、
2番目のフォームでsubmitした時は、

<h1>TITLE No2</h1>

が、画面の先頭にきてほしいのです。
<h1>TITLE No2</h1>の位置までスクロールした状態で表示させたい)

■試したこと
コードのようにformのactionで

<form id="form1" method="get" action="example.php#position1">

のように記述してみたのですが、ダメでした。

HTML

1<!-- ページ先頭部分--> 2<!-- テキストや画像--> 3 4<form id="form1" method="get" action="example.php"> 5<div id="position1"> 6<h1>TITLE No1</h1> 7TITLE No1の解説文 8TITLE No1の解説文 9<input type="text" value="" name="pos1"> 10<input type="submit" > 11</div> 12</form> 13<form id="form2" method="get" action="example.php"> 14<div id="position2"> 15<h1>TITLE No2</h1> 16TITLE No2の解説文 17TITLE No2の解説文 18<input type="text" value="" name="pos2"> 19<input type="submit" > 20</div> 21</form>

どのようにしたら実現できるでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/05/30 06:24

何がおきたのでしょか。 >ダメでした
sakura-shi

2018/05/30 06:46

formとは無関係にページの先頭が表示されました
guest

回答2

0

submitしたら、
1)actionで指定した動作(質問のコードでは"example.php")がサーバ側で行われ、
2)その結果(通常は、HTML形式のデータ)がブラウザ側に返ってきて、
3)ブラウザは、それを表示する
という順番で処理が進みます。

『ページ内の指定の場所が先頭に表示されるようにしたい』ということは、サーバが『ページ内の指定の場所が先頭に表示されるようになったHTMLを返す』ようになっていれば実現できます。

・submitの時に先頭に表示される場所(<a nama>タグのアンカー名)を送る
(formに、<input type="text" value="pos1" name="topPosition">のようにラベルをvalueに持つinputタグを入れておく)

・サーバ側のプログラムは、topPositionの値("pos1")を使って、適切な位置に<a name="pos1">を含むHTMLデータを作ると共に、htmlのロードが完了したら"pos1"のアンカーに移動する以下のようなjavascriptを含める

window.onload = function() { window.location.hash = "pos1" };

こういう感じになっていたら、指定の場所が先頭に表示されると思います。

投稿2018/05/30 08:57

coco_bauer

総合スコア6915

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

自ページで受けるんですよね?
普通に動きませんか?

CSS

1.pos{height:999px;}

HTML

1<form id="form1" method="get" action="#position1"> 2<div id="position1" class="pos"> 3<h1>TITLE No1</h1> 4TITLE No1の解説文 5TITLE No1の解説文 6<input type="text" value="" name="pos1"> 7<input type="submit" > 8</div> 9</form> 10<form id="form2" method="get" action="#position2"> 11<div id="position2" class="pos"> 12<h1>TITLE No2</h1> 13TITLE No2の解説文 14TITLE No2の解説文 15<input type="text" value="" name="pos2"> 16<input type="submit" > 17</div> 18</form>

投稿2018/05/30 07:17

yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakura-shi

2018/05/30 07:39

ありがとうございます。 action="#position2" とかでよいのですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問