画面上の特定箇所にジャンプさせたい(JSP)



JSPを利用した検索画面を作成中です。

検索画面は、主に(1)検索条件入力項目、(2)検索ボタン、(3)検索結果表示項目
の3エリアから構成されています。検索条件を入力して、検索ボタンをクリックすると、
検索結果が表示される一般的な構成です。検索結果は複数行表示されるため、
縦スクロールが発生します。

◆質問
検索ボタンをクリックした後に、
(3)検索結果表示項目の上部をブラウザ上の一番上に表示したい(※)のですが、
参考となる方法やWebページを教えて頂けないでしょうか?

※検索条件入力項目や検索ボタンは、上にスクロールすれば見える状態


[現在までにできたこと]
・<a>タグを利用して、ページ内をジャンプするようには
 できたのですが、検索条件入力項目のエリアを表示後、
(3)検索結果表示項目の上部にジャンプします。
 →検索ボタンクリック後に、検索条件や検索ボタンなどを
  表示せず、(3)検索結果表示項目の上部を表示するような
  画面を作りたいと考えています。


みなさんのお力を貸して頂ければと考えます。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/02/28 01:04:09
  • 終了:2014/03/03 22:43:18

ベストアンサー

id:degucho No.1

degucho回答回数250ベストアンサー獲得回数652014/02/28 05:32:19

(3)の最下部にスクロールを発生させるJavascriptを仕込めばよいかと思います。
1.アンカーにフォーカスを当てる
http://snowycode.blogspot.jp/2010/06/javascriptanchor.html
2.location.hashを設定
http://alphasis.info/2013/07/javascript-locationobject-hash/#sampleOutput
3.scrolltoで飛ばし先IDのoffsetopなどを指定
http://www.htmq.com/js/window_scrollto.shtml
4.JQueryを使用する
http://www.finefinefine.jp/web/kiji1388/

可能であれば4をloadイベントに設定して結果ゼロ判定などを組み込むのが奇麗かと思います。

他2件のコメントを見る
id:ET2012

> 現状の問題点がよくわかりませんが
今の状態ですと、表示がもっさりしているのです。
(1)や(2)を表示してから、“よっこいしょ”という感じでスクロールが発生して
(3)を表示しています。

改善するには、サーバーやクライアントのスペックをあげたり
するぐらいしか対応策はないでしょうか?
(ページングは画面全書き換えタイプで実装しています)

2014/03/03 00:25:41
id:degucho

animateの言葉通りわざともっさりさせているだけなので
http://xirasaya.com/?m=detail&hid=175
のようにするとかscrolltoで飛ばせば一瞬です。

今時のサイト風にするなら明細のみAjax書き換えでしょうが
素のJSPで全画面書き換えならフレームワークの特性で
上に戻るのが正しい姿とも言えますが

2014/03/03 00:43:21

その他の回答(0件)

id:degucho No.1

degucho回答回数250ベストアンサー獲得回数652014/02/28 05:32:19ここでベストアンサー

(3)の最下部にスクロールを発生させるJavascriptを仕込めばよいかと思います。
1.アンカーにフォーカスを当てる
http://snowycode.blogspot.jp/2010/06/javascriptanchor.html
2.location.hashを設定
http://alphasis.info/2013/07/javascript-locationobject-hash/#sampleOutput
3.scrolltoで飛ばし先IDのoffsetopなどを指定
http://www.htmq.com/js/window_scrollto.shtml
4.JQueryを使用する
http://www.finefinefine.jp/web/kiji1388/

可能であれば4をloadイベントに設定して結果ゼロ判定などを組み込むのが奇麗かと思います。

他2件のコメントを見る
id:ET2012

> 現状の問題点がよくわかりませんが
今の状態ですと、表示がもっさりしているのです。
(1)や(2)を表示してから、“よっこいしょ”という感じでスクロールが発生して
(3)を表示しています。

改善するには、サーバーやクライアントのスペックをあげたり
するぐらいしか対応策はないでしょうか?
(ページングは画面全書き換えタイプで実装しています)

2014/03/03 00:25:41
id:degucho

animateの言葉通りわざともっさりさせているだけなので
http://xirasaya.com/?m=detail&hid=175
のようにするとかscrolltoで飛ばせば一瞬です。

今時のサイト風にするなら明細のみAjax書き換えでしょうが
素のJSPで全画面書き換えならフレームワークの特性で
上に戻るのが正しい姿とも言えますが

2014/03/03 00:43:21
id:ET2012

細かい点まで補足いただき、ありがとうございました。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません