bootstrapでページ内リンクが効かない

Question

bootstrapで検索システムを作成致しました。

検索条件を選ぶフォームのサブミットボタンを押したら同じページ内の検索結果一覧の場所へ飛ばしたいと思い、

<form action="#anchor">

としております。

するとURLは

hoge.php#anchor

になっているにも関わらず、何故か検索結果一覧の所にスクロールされていません。

ちなみに直接ブラウザにURLを叩いて

http://example.com/hoge.php#anchor とやった場合も同様でスクロールされていません。

IDのつけかたミスでもありません。

<a href="#anchor">テスト</a>

という感じでaタグでテストを行ってみるときちんとスクロールされています。

これは何が原因がわからずご教示頂ければ幸いです。

Answer 1

フォームのactionはデータの送信先URLなのでサーバーサイドの属性だと思います。
アンカーの#はクライアントサイドの話なのでactionでアンカーを指定するというのは何か違うと思います。javasctiptで組む方がいいかと。

Comments

[falcon0321]

回答ありがとうございます。
通常のhttp://example.com/hoge.php#anchorとした場合でもスクロールされていないのですが、これは何かわかりますでしょうか？

[sousuke]

想像ですが#anchorはURLに入力されているのに対して実際はあとから生成しているのではないですか？
つまりページの読み込み時には#anchorは存在しているかページのTOPに付近にあって移動しない。
aタグで成功するのはその時にはページが完成しており#anchorが思った通りの場所にあるからでは。

[falcon0321]

いえ、id="anchor"は直接HTMLに書いてあり、ページでいうと下部の方です。
とりあえず、アドバイス頂いた通り、submitがあったときにjavascriptでスクロールすることで対応出来ました！ありがとうございます。