別ページからでもスムーススクロールでアンカーリンクさせるには？

Question

グローバルナビゲーションからページ内のアンカーリンクでスムーススクロールするよう以下のように設定しています。

トップページに会社概要やサービスなどのコンテンツがあります。

以下、トップページでのナビの設定です。

<li class="gnav__item"><a href="#sec-company">会社概要</a></li>
<li class="gnav__item"><a href="#sec-service">サービス</a></li>
<li class="gnav__item"><a href="#sec-access">アクセス</a></li>
<li class="gnav__item"><a href="#sec-info">お知らせ</a></li>

 $('.gnav__item a').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");
 
      return false;
    });

もちろんLPのように1ページだけならいいですが、ほかのページからトップページの各項目にアンカーをさせる場合もスムーススクロールでアンカーリンクさせる場合にどうしたらよいのか分かりません。

他のページでのナビの設定です。一階層下にあるページからトップページへのリンクを設定しています。

 <li class="gnav__item"><a href="../index.html#sec-company">会社概要</a></li>
 <li class="gnav__item"><a href="../index.html#sec-service">サービス</a></li>
 <li class="gnav__item"><a href="../index.html#sec-access">アクセス</a></li>
 <li class="gnav__item"><a href="../index.html#sec-info">お知らせ</a></li>

どなたかお力添えしていただけますでしょうか。

よろしくお願いいたします。

Answer 1

コードを分けて考えてみましょう

トップページのナビのリンクをクリックしたときに、スムーススクロールが動くのは提示されたJSのclickイベントの中にスムーススクロールの処理が書いてあるからということはわかると思います。

現状では下層ページからトップの＃付きリンクを押すと、トップの該当のidのところがすぐに表示されるので下層ページから戻ってきたときに、トップページのナビをクリックしたときと同じようにスムーススクロールの処理が行われればよいということになります。

まず準備としてクリックのイベントとその中身のスムーススクロールのイベントを分離してみましょう。
ざっくり書くとこんな感じです。

function smoothScroll(){
//現在のclickイベントの中身をこっちに書く
//（return false;以外）
}

$('.gnav__item a').click(function () {
    smoothScroll();
    return false; //←これだけはclickイベント内に書かないといけない
});

//続く

これで、処理が分離出来たと思います。
この新しく書いたsmoothScroll();が下層ページから戻ってきたときに動けばよいので
このように書くとページを読み込み時に関数smoothScrollを実行してくれます。

//続き
$(window).on('load', function() {
    smoothScroll();
});

$(window).on('load' ~というのは「ページ内の要素が読み込まれたら」という感じです。（実際にはもっと細かく言えるのですが、ここでは割愛します、またページ読み込み時のイベントには「load」と「ready」の２種類あるのでぜひ調べてみてください。ここでは意味があってloadを使っています）

まだこの状態ですと、下層ページから戻ってきたときに期待した動きをしてくれません。
smoothScrollの中身が、href="#~"のリンクをクリックしたときの処理になっているためです。
ですので、

1. href="#~"のリンクをクリックしたとき
2. URLに#~が含まれているとき

この２つのときに同じ動きをしてくれるように書き換える必要があります。
このように２つの異なる動きのあとに、共通の処理を行いたい場合は「引数」を使います。
コードで書くとこんな感じです。

// targetの部分が引数
function smoothScroll(target){
    // スクロールの速度
    var speed = 400; // ミリ秒

    // 移動先を調整
    var position = $(target).offset().top;

    $("body,html").animate({ scrollTop: position }, speed, "swing");
}

$('.gnav__item a').click(function () {
    // アンカーの値取得
    var href = $(this).attr("href");

    // 移動先を取得
    var target = (href == "#" || href == "") ? "html" : href;

    smoothScroll(target);
    return false; //←これだけはclickイベント内に書かないといけない
});

$(window).on('load', function() {
    var target = location.hash;
    smoothScroll(target);
});

location.hashというのはURLに含まれるハッシュを取得するものなので、詳しくは調べてみてください。
またなにか質問があればこちらにコメントください。

Comments

[kiriyama_hiro]

遅れてすみません！！
非常にためになりました。

他の質問なのですが、下層ページからトップページの各アンカーへリンクさせた場合「gnav__item a」のリンクは「../index.html#sec-company」となる場合に、トップページで読み込まれるときにhashを読みにいってるかと思いますが、その処理を行うより早くにアンカーへ飛んでしまうので、スムーススクロールにならなかったのは、なにかしら処理をいれないとダメですかね？

[mattari_panda]

おっしゃるとおり、何もしなければアンカーに飛んでしまいますよね。
なので、一度ページの上部に戻してやらないといけません。
こんな感じになると思います。

■ハッシュがあるリンク遷移とする
https://cdpn.io/mattari-panda/debug/PoGMZVN#sec5

■上記ページのコードはこちら（あくまで一例です）
https://codepen.io/mattari-panda/pen/PoGMZVN?editors=0011
・「//ページ上部に移動する」というコメントを付けている部分です
・せっかくですので、DOMContentLoadedを学んでみてください。
https://developer.mozilla.org/ja/docs/Web/API/Window/DOMContentLoaded_event

[kiriyama_hiro]

重ね重ねありがとうございます。　一旦試してみます！！
その後、ご報告させていただきます。

[kiriyama_hiro]

mattri_panda様

遅くなりまいした。
サンプルまで作成していただいてありがとうございます！　思っていた動作ができました。

一度ページの上部に戻す事で実現できました。
またperformance.nowは初めてしりました。
setTimeOutのtimeは読み込みが1秒以上かかった場合はすぐに実行させるための処理は、1秒以上かかったうえに一定時間後に実行させるのはユーザーを待たせすぎるのを防ぐという事でしょうか。

こういった処理も参考になりました。
ありがとうございます。