人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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


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

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

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

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


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


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

●質問者: ET2012
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● degucho
ベストアンサー

(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イベントに設定して結果ゼロ判定などを組み込むのが奇麗かと思います。


ET2012さんのコメント
回答ありがとうございます。 検索ボタンをクリック後、(3)検索結果表示項目が スムーズにスクロールして表示されるようになりました。 ※「4.JQueryを使用する」を利用しました。 説明が不足していたのですが、(3)の一部に「次のページ」 「前のページ」リンクがあります。 このリンクをクリックしたときにも(3)検索結果表示項目 を直接表示させるようにしたいのです。 何か良い方法はありますか? ※現状ですと、ページリンクをクリックすると、 (1)や(2)が表示後、スクロールして(3)を 表示する状態です。

deguchoさんのコメント
ページングをどう実装しているかにもよりますが 画面全書き換えタイプなら hiddenにdocumentElement.scrollTopを保存しておいて ページ読み込み時にhiddenがゼロ以外だったら 再設定とかでしょうか。 現状の問題点がよくわかりませんが

ET2012さんのコメント
> 現状の問題点がよくわかりませんが 今の状態ですと、表示がもっさりしているのです。 (1)や(2)を表示してから、“よっこいしょ”という感じでスクロールが発生して (3)を表示しています。 改善するには、サーバーやクライアントのスペックをあげたり するぐらいしか対応策はないでしょうか? (ページングは画面全書き換えタイプで実装しています)

deguchoさんのコメント
animateの言葉通りわざともっさりさせているだけなので http://xirasaya.com/?m=detail&hid=175 のようにするとかscrolltoで飛ばせば一瞬です。 今時のサイト風にするなら明細のみAjax書き換えでしょうが 素のJSPで全画面書き換えならフレームワークの特性で 上に戻るのが正しい姿とも言えますが

質問者から

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


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ