javascriptで次のような事がしたいのですが、どの様にすれば良い

質問

javascriptで次のような事がしたいのですが、どの様にすれば良いのかわかりません。

Ｗｅｂサイト制作をしているのですが、次の様に出来たら便利と思い、今回初めて質問させて頂きます。

例えばECサイトを次の流れで閲覧していたとします。

(1)　商品一覧ページ

　　　↓一覧の中の気になった商品Ａをクリック

(2)　商品Ａの詳細ページ

　　　↓

(3)　ブラウザの戻るボタンで(1)のページに戻る

この様な場合、(3)で(1)に戻った時に、一覧ページがヘッダー部分（通常画面上部）から表示されます。

一覧の商品を順番に閲覧　→　気になる商品Ａが目に留まる　→　商品Ａをクリック　→　
商品Ａ詳細を閲覧　→　ブラウザの戻るボタンで一覧に戻る　→　一覧で続きの商品を見る

といった流れで見ている場合、商品Ａが一覧の下の方に掲載されていた場合（また商品一覧の数が多い場合）続きの一覧商品を閲覧するのに、スクロールしなければなりませんので、
何度も繰り返していると、わずらわしくなってきます。

出来れば、クリックして商品Ａの詳細を見た後、ブラウザで一覧ページに戻った時に
商品Ａの場所に移動出来れば閲覧者の方に親切だと思います。

その様に作ってあるサイトを以前に見た事があったのですが、どのサイトだったか忘れてしまいました。
多分、javascriptでしてあるのだと思いますが、私はjavascriptは書けません。

prototypeやjQueryを使用して出来るのでしたら、どのライブラリを使用すれば良いのかとか教えて頂けませんでしょうか？
また、javascriptで作るのではない場合は、何を使えば良いのか・・・から親切に教えて頂ければ助かります。

回答No.3

think49 · ベストアンサー

私の環境ではブラウザの [戻る] をクリックすると、元々見ていたスクロール位置を表示してくれるのですが…。(IE8, Google Chrome 6 で確認)

1. http://okwave.jp/qa/q6279061.html を開く
2. 少し下にスクロールして [回答する] をクリック
3. [戻る]
4. 2. のスクロール位置に戻る

ブラウザ依存の問題ではないでしょうか？
あるいは、"Cache-Control: no-cache" を出力していてキャッシュしていないとか…。

お礼

そうだったんですね。
全然知りませんでした（汗）

いろいろなブラウザで試して、納得できました。
ありがとうございました。

回答No.2

神崎 渉瑠（@taloo）

連続失礼。書き忘れました。

商品一覧 -> 商品概要 -> 商品詳細

のような流れところで、商品詳細 => 商品一覧に戻したい場合は
<a href="商品一覧">というリンクを張るのが良いと思います。

さらに、<a href="商品概要">というリンクも両方付けておけば、どちらのページにも行きたい方に行けるようになりますから、
詳細を見た後概要に戻りたいという人まで強制的に一覧に戻させるより、使いやすくなると思います。

回答No.1

神崎 渉瑠（@taloo）

>出来れば、クリックして商品Ａの詳細を見た後、ブラウザで一覧ページに戻った時に
>商品Ａの場所に移動出来れば閲覧者の方に親切だと思います。

ユーザビリティーという考え方においては、
「ブラウザの本来の動作を変更すると、「本来の動作のつもりで操作したが、そうならない」ということが、利用者の混乱を招く恐れがある」というのがあります。

ブラウザの戻るボタンは「1ページ戻る」です。
考えられている動作はブラウザのボタンを「一時的に2ページ戻る」に作り替える方法ですが、
先入観から2回ボタンを押すと、どのページに戻るかわからなくなりますが、それは良いですか？
ブラウザの本来の処理を変えると、それ相応のリスクが伴いますのでその点を踏まえて作って下さい。
（制作依頼を出すにしても、自作するにしても）

で、その作り方ですが。

>(1)　商品一覧ページ
>
>　　　↓一覧の中の気になった商品Ａをクリック
>
>(2)　商品Ａの詳細ページ
>
>　　　↓
>
>(3)　ブラウザの戻るボタンで(1)のページに戻る

この流れなら、(2)の詳細ページで戻るボタンを押すと(1)に行くのではないかと思いますし、
何もする必要はないと思いますが？

それはともかく、特定のページからブラウザの戻るボタンで戻ったときに、履歴をもう1ページ戻るようにする方法ですが。

(A)ページ閲覧時に「現在見ているページ」の情報をcookieに保存します。
(B)ページ移動があれば、cookieから「前回見ていたページ」を確認し、それが詳細ページであり、現在のページが特定のページであれば、history.back()でもう1ページ戻るようにします。
(C)Bの処理でページを戻るときに、cookieから詳細ページと特定のページを見ていたという情報を削除します。

この方法でだいたい行けると思います。
window.onloadでcookieの確認をしようとすると、『戻るボタン』では実行されないことがありますので、
</body>の直前に処理を記述しておく方が良いと思います。

お礼

ご親切にご回答いただいてありがとうございました。
質問が下手ですみませんでした。

補足

ご親切にご回答ありがとうございました。
私の説明が少し悪かった様です。

2ページ戻りたいのではなく、(2)の商品Aの詳細ページから(1)の商品一覧ページに戻った時に
サイトがヘッダーから表示されるのではなく、一覧の商品Aの位置が画面上部に
表示されたら良いな・・・と思っていたのですが・・・。

例えば、amazonの様に一覧表示で商品がたくさんあって、順番に見ていた場合
詳細ページから一覧に戻った時に、いちいちヘッダーから表示されていたのでは
スクロールするのが面倒くさいな・・・と思っていました。

でも、それはブラウザに依存すると言う事がわかりました。

どうもすみませんでした。