楽天　アドレスバーから正しい位置に跳ぶ方法

Question

お世話になっております。種類から探す、予算から探す、の部分から所定の位置にジャンプできるようにしています。（カテゴリー→ゴールドのページに跳ぶようになっています）クリックでは正しい位置にジャンプできるのですが、ジャンプした先（ゴールド）でURLをコピーし、ブラウザのアドレスバーに直接、貼り付けるとコピーしたジャンプ先に行かず、最初にカテゴリから跳んだ位置に行ってしまいます。どこか部分的に間違っているのか、そもそも構造として良くないのか、ご教授お願いいたします。カテゴリーページhttps://item.rakuten.co.jp/la-floraison/c/0000000208/

Answer

ECマスターズの北原です。>ブラウザのアドレスバーに直接、貼り付けるとコピーしたジャンプ先に行かず、最初にカテゴリから跳んだ位置に行ってしまいます。私の方で一通り動作を確認したところ、遷移と直接アドレスバーに貼り付けた時の挙動は、問題ないように感じました。調査したURLの一例はこちらです。https//www.rakuten.ne.jp/gold/SHOP-URL/category/motherday/2022/index.html#c5https//www.rakuten.ne.jp/gold/SHOP-URL/category/motherday/2022/index.html#c2大変お手数ではございますが、直接アドレスバーに貼り付けたURLをご教授いただけますでしょうか。

Answer

ご確認ありがとうございます。特定のURLという訳ではなく、例えばhttps://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/　からhttps//www.rakuten.ne.jp/gold/SHOP-URL/category/motherday/2022/index.html#c5の入浴剤の位置に行った後、ページ内のトップに戻るボタンを押し、プリザーブドフラワーを押す、プリザーブドフラワーの位置に跳びはするが、跳んだ後にURLを確認するとhttps//www.rakuten.ne.jp/gold/SHOP-URL/category/motherday/2022/index.html#c5のままで、上記をコピペして、直接アドレスバーに貼り付けても、入浴剤の位置にしか行けないという現象です。ややこしくて、申し訳ありません。どうぞよろしくお願いいたします。

Answer

ECマスターズの北原です。>直接アドレスバーに貼り付けても、入浴剤の位置にしか行けないご教授いただきありがとうございます。ご担当者様のページでは、ページ内遷移の際にアニメーションなどを使うために、JavaScriptを使ってスクロールさせているかと思います。JavaScriptでスクロールさせますと、基本的にはURLが変更されません。こちらの方法を使うことで、URLを変更することができます。https://qiita.com/nightyknite/items/b350dc95f7da089a516aページスクロールの際のJavaScript内に、URLを変更する処理を記述いただくことで解決するかと思います。対応が難しいようでしたら、メルマガや案内の際にページ内リンクを含めたURLを案内いただければ問題ないかと思います。

Answer

回答ありがとうございます。お客様がジャンプ先でリンクをコピーした際に、同じ位置に行けるようにしたいのでJavaScript内に書き込む方法にしようと思います。以下のいずれかの記述を書き込むということだと思うのですが、どれが適切か判断できずご教授いただければ幸いです。// 履歴エントリの置き換え // http://exapmple.com/xxx/123 → http://example.com/xxx/aiueohistory.replaceState('','','aiueo');// http://exapmple.com/xxx/123 → http://example.com/aiueohistory.replaceState('','','/aiueo');// 履歴エントリの追加history.pushState('','','aiueo');また、aiueoの部分に書き換えたいURL箇所を書き込むのだと思いますが（例えばhttps//www.rakuten.ne.jp/gold/SHOP-URL/category/motherday/2022/index.html#c5からhttps//www.rakuten.ne.jp/gold/SHOP-URL/category/motherday/2022/index.html#c2に書き換えたいのならhistory.replaceState('','','/#c2');　と記述）これだと#c2にしか変更できず、お客様がどこにジャンプするか分からない中で有効なのでしょうか？JavaScriptの知識がなく、申し訳ありません。どうぞよろしくお願いいたします。

Answer

ECマスターズの北原です。>どれが適切か判断できずご教授いただければ幸いです。// 履歴エントリの置き換え// http://exapmple.com/xxx/123 → http://example.com/xxx/aiueohistory.replaceState('','','aiueo');こちらをお使いいただければ問題ないかと思います。以下がご担当社様のページでスクロールさせている部分かと思います。コード内にあるようにhistory.replaceState('', '', href);こちらを追加することで、URLが適切に変更されます。ここからは解説になります。hrefという変数には、ページ内遷移後のidが格納されています。今回では、『#c2』や『#c5』などが格納されます。この変数を history.replaceState('', '', "遷移後のid");へ渡してあげることで、URLを変更することができるようになります。わかりづらいところがありましたら、お気軽にご返信くださいませ。よろしくお願い致します。

楽天 アドレスバーから正しい位置に跳ぶ方法

カテゴリーから探す

楽天　アドレスバーから正しい位置に跳ぶ方法