検索一覧から詳細画面へ遷移した後の、戻るボタンを押した後の挙動について

Question

Ruby on Rails、jQueryで検索画面を作成しようと考えています。
ユーザーは以下流れで利用することが多いと思います。

①検索一覧で画面を下へスクロール
②①の後、興味のある内容Aを見つけたのでクリックし検索一覧から詳細画面へ遷移
③戻るボタンを押し、検索一覧へ戻る

③後の検索一覧において、内容Aがファーストビューになる状態にしたいのですが、
やり方が分かりません。ご教示いただければ幸いです。

〜1/20追記〜
ちなみに、新規タブ追加で実装したくない理由は、レスポンシブ対応を求められており、
スマホではユーザビリティがよくないためです。

また、いろいろなWEBサービスを調べた結果、メルカリが私の求めるUIでした。
https://www.mercari.com/jp/search/?keyword=javascript

メルカリの検索は、商品の詳細画面から検索一覧画面へ戻ると、元の位置に戻ります。

この実装の仕方が分からないため、お手数ですがご回答のほどよろしくお願いします。

Answer 1

RubyOnRails等に限らずですがとりあえず別ウィンドウ（別タブ）で表示されるようにするのではダメですか？
そうするとそもそも同じ画面は残ったままですので要望は果たせる気がします。

あくまで同じ画面（ウィンドウというかタブと言うか）で処理したい場合はクリックされたときの状態を記憶しておくことが肝心となります。
結局は質問者さんの作り次第なので間違いなくこれで戻せるかは質問文だけだと全く分からないのですが、「戻る」クリックした際のURL、もしくはパラメータをGETなりで渡して詳細画面の戻るにリンクさせるのが大筋の基本だと思います。
ようするに「戻る」のURLをクリックした際に表示されているURLと同一にすると言うことです。
これはURLにパラメータ（クエリ）としてページ数などを含んでいる場合なので、もし別のパラメータで現在のページ数などを持っているのであればいずれにしてもそれを戻す作業をしてあげれば良いと言うことになると思います。

ページ内の位置としても細かくやるなら現在のトップからのピクセルをクリック時に記録してページが表示された際にその位置へスクロールさせる様な事をjQueryで行えば良いと思います。
雑にやるなら例えばページ当たり50件の検索結果であれば全ての検索結果にアンカーを付けておいて「戻る」リンクで飛ばすのもアリでしょうかね。

個人的にはたまに自分のお客さんでも質問者さんと同じ要望をされることがあるのですが、なぜ別タブではダメなのか聞いても個人的に納得できる答えをもらったことが未だに無いんですが・・まあ仕事だからやりますが・・　苦笑

Comments

[olaf]

ご回答ありがとうございます！説明不足で申し訳ございません。
別ウィンドウを避けたい理由は、レスポンシブ対応で実装する必要があり、
スマホで別ウィンドウを開かせるのは、使い勝手がよくないためです。

やりたいことはページ内の位置を指定してあげることですので、やはりjQueryでスクロールしたり、各検索結果にアンカーをつけるやり方しかないですよね・・・。

Answer 2

疑似ダイアログにする手がありますね。
Ajaxで処理するため、実際には遷移しません。
Twitterのような感じです。