javascriptで次のような事がしたいのですが、どの様にすれば良いのかわかりません。
Webサイト制作をしているのですが、次の様に出来たら便利と思い、今回初めて質問させて頂きます。
例えばECサイトを次の流れで閲覧していたとします。
(1) 商品一覧ページ
↓一覧の中の気になった商品Aをクリック
(2) 商品Aの詳細ページ
↓
(3) ブラウザの戻るボタンで(1)のページに戻る
この様な場合、(3)で(1)に戻った時に、一覧ページがヘッダー部分(通常画面上部)から表示されます。
一覧の商品を順番に閲覧 → 気になる商品Aが目に留まる → 商品Aをクリック →
商品A詳細を閲覧 → ブラウザの戻るボタンで一覧に戻る → 一覧で続きの商品を見る
といった流れで見ている場合、商品Aが一覧の下の方に掲載されていた場合(また商品一覧の数が多い場合)続きの一覧商品を閲覧するのに、スクロールしなければなりませんので、
何度も繰り返していると、わずらわしくなってきます。
出来れば、クリックして商品Aの詳細を見た後、ブラウザで一覧ページに戻った時に
商品Aの場所に移動出来れば閲覧者の方に親切だと思います。
その様に作ってあるサイトを以前に見た事があったのですが、どのサイトだったか忘れてしまいました。
多分、javascriptでしてあるのだと思いますが、私はjavascriptは書けません。
prototypeやjQueryを使用して出来るのでしたら、どのライブラリを使用すれば良いのかとか教えて頂けませんでしょうか?
また、javascriptで作るのではない場合は、何を使えば良いのか・・・から親切に教えて頂ければ助かります。
No.3ベストアンサー
- 回答日時:
私の環境ではブラウザの [戻る] をクリックすると、元々見ていたスクロール位置を表示してくれるのですが…。
(IE8, Google Chrome 6 で確認)1. http://okwave.jp/qa/q6279061.html を開く
2. 少し下にスクロールして [回答する] をクリック
3. [戻る]
4. 2. のスクロール位置に戻る
ブラウザ依存の問題ではないでしょうか?
あるいは、"Cache-Control: no-cache" を出力していてキャッシュしていないとか…。
No.2
- 回答日時:
連続失礼。
書き忘れました。商品一覧 -> 商品概要 -> 商品詳細
のような流れところで、商品詳細 => 商品一覧に戻したい場合は
<a href="商品一覧">というリンクを張るのが良いと思います。
さらに、<a href="商品概要">というリンクも両方付けておけば、どちらのページにも行きたい方に行けるようになりますから、
詳細を見た後概要に戻りたいという人まで強制的に一覧に戻させるより、使いやすくなると思います。
No.1
- 回答日時:
>出来れば、クリックして商品Aの詳細を見た後、ブラウザで一覧ページに戻った時に
>商品Aの場所に移動出来れば閲覧者の方に親切だと思います。
ユーザビリティーという考え方においては、
「ブラウザの本来の動作を変更すると、「本来の動作のつもりで操作したが、そうならない」ということが、利用者の混乱を招く恐れがある」というのがあります。
ブラウザの戻るボタンは「1ページ戻る」です。
考えられている動作はブラウザのボタンを「一時的に2ページ戻る」に作り替える方法ですが、
先入観から2回ボタンを押すと、どのページに戻るかわからなくなりますが、それは良いですか?
ブラウザの本来の処理を変えると、それ相応のリスクが伴いますのでその点を踏まえて作って下さい。
(制作依頼を出すにしても、自作するにしても)
で、その作り方ですが。
>(1) 商品一覧ページ
>
> ↓一覧の中の気になった商品Aをクリック
>
>(2) 商品Aの詳細ページ
>
> ↓
>
>(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の様に一覧表示で商品がたくさんあって、順番に見ていた場合
詳細ページから一覧に戻った時に、いちいちヘッダーから表示されていたのでは
スクロールするのが面倒くさいな・・・と思っていました。
でも、それはブラウザに依存すると言う事がわかりました。
どうもすみませんでした。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- ネットスーパー 他人の閲覧履歴消せますか? 2 2022/09/19 04:26
- その他(プログラミング・Web制作) パイソンでのプログラミングについて 3 2022/08/11 20:31
- Amazon アマゾン 7 2022/06/11 11:03
- Amazon 新規でAmazon商品ページ作成方法について 1 2022/03/28 00:22
- メルカリ ハイブランド品ですが、メルカリで以前6万円前後で売れたものが、 状態もそんなに大差ない同じ商品を出品 0 2023/05/06 13:35
- その他(セキュリティ) 一度、閲覧しただけで、数ヶ月も同じ広告が表示されるのは違法じゃないの? 2 2022/09/27 10:07
- その他(Microsoft Office) Excelで総数量を変動させたい 2 2022/11/04 23:49
- 飲食店・レストラン かつやさん値上げしましたか?今日、ロースカツとアジフライの単品買ったんですがあれと?(´・ω・`) 1 2023/03/11 21:05
- 英語 オンラインショッピングへの問い合わせ文の英訳をお願いします。 1 2022/09/13 11:29
- その他(ネットショッピング・通販・ECサイト) 今年購入した制汗クリームで自分の肌には合わなかったのでフリマアプリで出品をしました。 そしたらその日 2 2023/08/09 04:13
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLでサブフレームから親のス...
-
switch文のswitch(n)の部分を複...
-
セレクトボックスを2つ設けて選...
-
GoogleChart 階層ごとのブロッ...
-
階層別の組織図の自動作成について
-
①入力フォーム→②確認表示画面→③...
-
読み込んだQRコードをフォーム...
-
API連携のプログラミングについ...
-
GASでチェックボックスを一括of...
-
セレクトボックスで配列を呼び...
-
【Google Apps Script】「ライ...
-
ボタンを押したあとに画像を表...
-
フォームが空欄の時にフォーム...
-
jQueryで同じクラス名のものを...
-
ジャバスクリプトについて。
-
React hooksが値を返して配列変...
-
初心者です。gulpでコンパイル...
-
プログラムについて。
-
Q&A掲示板の入力フォームに文字...
-
メールフォームの日付入力フォ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Webサイト内に埋め込んだmp4動...
-
SEOに被リンクは全く必要が...
-
スマホでボタンがhoverの状態か...
-
個人hp 外部ページへのリンク...
-
サーチコンソールで被リンクを...
-
ホームページ制作で教えてくだ...
-
excel VBA でjava のボタンを押...
-
画面のどこかをクリックすると
-
HTMLのリンクの色をクリックす...
-
iFrame内の変数を、親フレーム...
-
Googleフォームの回答リンクに...
-
WEBページのジャンプ。素早く行...
-
jquery loadでページを読み込...
-
サイト構築の方法を教えてください
-
ブラウザーの戻るボタンを押し...
-
リロードした時にページの一番...
-
『工事中』の素材
-
ページ内リンククリックでアコ...
-
戻るボタンの作成
-
リンク先を新しいタブで開けな...
おすすめ情報