JSPを利用した検索画面を作成中です。
検索画面は、主に(1)検索条件入力項目、(2)検索ボタン、(3)検索結果表示項目
の３エリアから構成されています。検索条件を入力して、検索ボタンをクリックすると、
検索結果が表示される一般的な構成です。検索結果は複数行表示されるため、
縦スクロールが発生します。
◆質問
検索ボタンをクリックした後に、
(3)検索結果表示項目の上部をブラウザ上の一番上に表示したい(※)のですが、
参考となる方法やWebページを教えて頂けないでしょうか？
※検索条件入力項目や検索ボタンは、上にスクロールすれば見える状態
[現在までにできたこと]
・<a>タグを利用して、ページ内をジャンプするようには
できたのですが、検索条件入力項目のエリアを表示後、
(3)検索結果表示項目の上部にジャンプします。
→検索ボタンクリック後に、検索条件や検索ボタンなどを
表示せず、(3)検索結果表示項目の上部を表示するような
画面を作りたいと考えています。
みなさんのお力を貸して頂ければと考えます。
No.1
281
75
（３）の最下部にスクロールを発生させる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イベントに設定して結果ゼロ判定などを組み込むのが奇麗かと思います。
No.1
28175
ここでベストアンサー
（３）の最下部にスクロールを発生させる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イベントに設定して結果ゼロ判定などを組み込むのが奇麗かと思います。
> 現状の問題点がよくわかりませんが
今の状態ですと、表示がもっさりしているのです。
(1)や(2)を表示してから、“よっこいしょ”という感じでスクロールが発生して
(3)を表示しています。
改善するには、サーバーやクライアントのスペックをあげたり
するぐらいしか対応策はないでしょうか？
(ページングは画面全書き換えタイプで実装しています)
animateの言葉通りわざともっさりさせているだけなので
http://xirasaya.com/?m=detail&hid=175
のようにするとかscrolltoで飛ばせば一瞬です。
今時のサイト風にするなら明細のみAjax書き換えでしょうが
素のJSPで全画面書き換えならフレームワークの特性で
上に戻るのが正しい姿とも言えますが
2
0
3
4
2
> 現状の問題点がよくわかりませんが
2014/03/03 00:25:41今の状態ですと、表示がもっさりしているのです。
(1)や(2)を表示してから、“よっこいしょ”という感じでスクロールが発生して
(3)を表示しています。
改善するには、サーバーやクライアントのスペックをあげたり
するぐらいしか対応策はないでしょうか？
(ページングは画面全書き換えタイプで実装しています)
animateの言葉通りわざともっさりさせているだけなので
2014/03/03 00:43:21http://xirasaya.com/?m=detail&hid=175
のようにするとかscrolltoで飛ばせば一瞬です。
今時のサイト風にするなら明細のみAjax書き換えでしょうが
素のJSPで全画面書き換えならフレームワークの特性で
上に戻るのが正しい姿とも言えますが