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

Question

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

Answer

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

Answer

ご確認ありがとうございます。

特定のURLという訳ではなく、例えば
https://item.rakuten.co.jp/la-floraison/c/0000000208/　から
https://www.rakuten.ne.jp/gold/la-floraison/category/motherday/2022/index.html#c5
の入浴剤の位置に行った後、ページ内のトップに戻るボタンを押し、プリザーブドフラワーを押す、プリザーブドフラワーの位置に跳びはするが、跳んだ後にURLを確認するとhttps://www.rakuten.ne.jp/gold/la-floraison/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/aiueo
history.replaceState('','','aiueo');

// http://exapmple.com/xxx/123 → http://example.com/aiueo
history.replaceState('','','/aiueo');

// 履歴エントリの追加
history.pushState('','','aiueo');


また、aiueoの部分に書き換えたいURL箇所を書き込むのだと思いますが
（例えばhttps://www.rakuten.ne.jp/gold/la-floraison/category/motherday/2022/index.html#c5
からhttps://www.rakuten.ne.jp/gold/la-floraison/category/motherday/2022/index.html#c2に書き換えたいのならhistory.replaceState('','','/#c2');　と記述）

これだと#c2にしか変更できず、お客様がどこにジャンプするか分からない中で有効なのでしょうか？

JavaScriptの知識がなく、申し訳ありません。
どうぞよろしくお願いいたします。

Answer

ECマスターズの北原です。

>どれが適切か判断できずご教授いただければ幸いです。

// 履歴エントリの置き換え
// http://exapmple.com/xxx/123 → http://example.com/xxx/aiueo
history.replaceState('','','aiueo');

こちらをお使いいただければ問題ないかと思います。

以下がご担当社様のページでスクロールさせている部分かと思います。
コード内にあるように
history.replaceState('', '', href);
こちらを追加することで、URLが適切に変更されます。


            $(function () {
                // #で始まるアンカーをクリックした場合に処理
                $('a[href^=#]').click(function () {
                    // スクロールの速度
                    var speed = 400; // ミリ秒
                    // アンカーの値取得
                    var href = $(this).attr("href");
                    // 移動先を取得
                    var target = $(href == "#" || href == "" ? 'html' : href);
                    // 移動先を数値で取得
                    var position = target.offset().top;
                    // スムーススクロール
                    $('body,html').animate({ scrollTop: position }, speed, 'swing');

                    // -------こちらを追加してください。-------
                    history.replaceState('', '', href);

                    return false;
                });
            });
        

ここからは解説になります。

hrefという変数には、ページ内遷移後のidが格納されています。
今回では、『#c2』や『#c5』などが格納されます。
この変数を history.replaceState('', '', "遷移後のid");へ渡してあげることで、
URLを変更することができるようになります。

わかりづらいところがありましたら、お気軽にご返信くださいませ。
よろしくお願い致します。

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

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