wordpressでページ内・外問わずスムーズスクロールを実装したい

Question

前提・実現したいこと

現在wordpressで簡単なHPを作成しております。

トップページにいくつかのコンテンツがあり、メニューの項目をクリックすると対応したコンテンツへスクロールするといった形を目指しています。

基本ペライチなのですが問い合わせフォームや新着情報などもありますので、それらの下層ページからもトップページのコンテンツへのリンクをスムーズに行えるようにしたいです。

またヘッダーが追従するようになっているので、ヘッダーの高さ分ずらせるようにもしたいです。

発生している問題・エラーメッセージ

wordpress内のメニューのカスタムリンクに「#hoge」といった形で仕込むとうまくスクロールするのですが、それだと下層ページから遷移できません。

なので「https://ページURL#hoge」のように仕込んだのですが、遷移はするもののスクロールせずに各コンテンツまで飛ぶようになってしまいました。トップページにいる状態でメニューをクリックしてもスクロールしません。

該当のソースコード

下記ページを参考にしました。
https://125naroom.com/web/3476

<script>
jQuery(function(){
  var headerHeight = jQuery('header').outerHeight();
  var urlHash = location.hash;
  if(urlHash) {
    jQuery('body,html').stop().scrollTop(0);
    setTimeout(function(){
      var target = jQuery(urlHash);
      var position = target.offset().top - headerHeight;
      jQuery('body,html').stop().animate({scrollTop:position}, 500);
    }, 100);
  }
  jQuery('a[href^="#"]').click(function(){
    var href= jQuery(this).attr("href");
    var target = jQuery(href);
    var position = target.offset().top - headerHeight;
    jQuery('body,html').stop().animate({scrollTop:position}, 500);
    return false;
  });
});
</script>

試したこと

下記プラグインなども試してみましたがうまくいきませんでした。
https://www.hiskip.com/wp/plugin/ui/screen-scroll/22269.html

下記ページを参考に「$(window).on('load'」などをつけてもみましたがうまくいかず…
https://techmemo.biz/javascript/jquery-smooth-scroll-otherpage/

補足情報（FW/ツールのバージョンなど）

使用しているテーマはTCDのSwitchです。
https://tcd-theme.com/tcd063

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、問題なく動作しました。

ですので、ご提示のコードには問題の原因がないと思われます。
ご提示いただいていない部分に原因があるのではないでしょうか（たとえば、別のスクリプトと衝突しているなど）。

[saku615]

エラーコードなどを確認したのですが特にありませんでした…

[Lhankor_Mhy]

「エラーコードなどを確認したのですが特にありませんでした…」とのことですが、これは当方の補足依頼に対する回答でしょうか？

そうであれば、わかりにくい書き方で申し訳ないです。
当方の言いたいことは「エラーコードを出せ」というものではなくて、「もっとコードを出せ」です。
よろしくお願いいたします。

[saku615]

もっとコードを出せとのことですが、使用しているテーマのどの部分のコードを出せばいいかご教示いただけますでしょうか？

基本的にこちら側で後から追加したスクリプトに関しては該当のソースコードに記載した部分のみになります。

[Lhankor_Mhy]

先に申し上げた通り、「ご提示いただいていない部分に原因がある」までしかわかりません。
一般に、別のスクリプトとの衝突がある場合、どの部分のコードに原因があるかを具体的なコードを見ずに判断することは困難です。

---

> 基本的にこちら側で後から追加したスクリプトに関しては該当のソースコードに記載した部分のみになります

わかりにくくて申し訳ありません。
当方で申し上げた「別のスクリプト」とは、「あなたが書いた別のスクリプト」という意味ではなくて、「あなたが書いたかどうかは関係なく、そのページで動作している別のスクリプト」という意味です。

---

>最も良いのは、現象を再現するためのミニマムなプログラムを改めて作ることです。そうすれば、貴方自身が現象と問題をより良く理解することにもつながるからです。

https://teratail.com/help/question-tips#questionTips3-5-1

---

「現象を再現するためのミニマムなプログラム」をどうやって作るかですが、たとえば、以下の様な手順はどうですか？

①　HTMLからフッターを削除してみて、それでも問題が再現するかどうか確認する。
②　①で問題が再現しないのであればフッターに原因がある可能性があるので、フッター以外を削除してみる。 以下、①に戻って別の部分を削除するを繰り返す。
③　①で問題が再現するのであればフッターは関係ないので「現象を再現するための、より小さいプログラム」ができたことになる。以下、①に戻って別の部分を削除するを繰り返す。

[Lhankor_Mhy]

もっと手っ取り早いのは、そのページのURLをご提示いただくことですが、これは無理な場合も多いので……

[Lhankor_Mhy]

ご提示のテーマのデモページ（ https://demo.tcd-theme.com/tcd063/ ）にご提示のコードを追加して試してみましたが、問題なく動作しました。

つまり、ご提示のコードとテーマのコードには問題がなさそうです。
ご提示いただいていないプラグインや子テーマのコードに原因がありそうです。

[saku615]

個人で持っている別のサーバーに同じテーマを設定し、提示したスクリプトを設置してみたのですが全く同じ挙動(同一ページ内だとスムーズが効かない、別ページから飛ぶとスムーズも効かずジャンプ先の位置もおかしい)になりますね…
ちなみに下記のエラーが出ています。
TypeError: undefined is not an object (evaluating 'target.offset().top')

こちらが再現したページになります。
https://ykworks.net/wp/

[Lhankor_Mhy]

拝見しました。
undefined is not an object (evaluating 'target.offset().top') のエラーメッセージは再現しませんでした。エラーが出ているURLのフラグメント部分が存在しないアンカーである可能性があります。

また、スクロールの挙動ですが、一度アンカー部分までスクロールした後に、最上部へ戻っているようです。もう少し見てみます。

[Lhankor_Mhy]

slick と競合しているようですね。

Answer 1

実際の環境で上手く動くか自信がないですが。

    jQuery(function () {
      jQuery('#js-header-slider').on('init', () => { 　　　　　　　　　// ここ
        var headerHeight = jQuery('header').outerHeight();
        var urlHash = location.hash;
        if (urlHash) {
          jQuery('body,html').stop().scrollTop(0);
          setTimeout(function () {
            var target = jQuery(urlHash);
            var position = target.offset().top - headerHeight;
            jQuery('body,html').stop().animate({ scrollTop: position }, 500);
          }, 100);
        }
      }) 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　// ここ
      jQuery('a[href^="#"]').click(function () {
        var href = jQuery(this).attr("href");
        var target = jQuery(href);
        var position = target.offset().top - headerHeight;
        jQuery('body,html').stop().animate({ scrollTop: position }, 500);
        return false;
      });
    });

---

コメントを受けて修正

    jQuery(function () {
      var headerHeight = jQuery('header').outerHeight();
      jQuery('#js-header-slider').on('init', () => { 　　　　　　　　　// ここ
        var urlHash = location.hash;
        if (urlHash) {
          jQuery('body,html').stop().scrollTop(0);
          setTimeout(function () {
            var target = jQuery(urlHash);
            var position = target.offset().top - headerHeight;
            jQuery('body,html').stop().animate({ scrollTop: position }, 500);
          }, 100);
        }
      }) 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　// ここ
      jQuery('a[href^="#"]').click(function () {
        var href = jQuery(this).attr("href");
        var target = jQuery(href);
        var position = target.offset().top - headerHeight;
        jQuery('body,html').stop().animate({ scrollTop: position }, 500);
        return false;
      });
    });

---

コメントを受けて再修正

    jQuery(function () {
      var headerHeight = jQuery('header').outerHeight();
      jQuery('#js-header-slider').on('init', () => { 　　　　　　　　　// ここ
        var urlHash = location.hash;
        if (urlHash) {
          jQuery('body,html').stop().scrollTop(0);
          setTimeout(function () {
            var target = jQuery(urlHash);
            var position = target.offset().top - headerHeight;
            jQuery('body,html').stop().animate({ scrollTop: position }, 500);
          }, 100);
        }
      }) 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　// ここ
      jQuery('a[href*="#"]').click(function () {                             // ここ
        var href = '#' + jQuery('a[href*="#"]').attr("href").split('#')[1];   // ここ

        var target = jQuery(href);
        var position = target.offset().top - headerHeight;
        jQuery('body,html').stop().animate({ scrollTop: position }, 500);
        return false;
      });
    });

---

コメントを受けて再々修正

    jQuery(function () {
      var headerHeight = jQuery('header').outerHeight();
      jQuery('#js-header-slider').on('init', () => { 　　　　　　　　　// ここ
        var urlHash = location.hash;
        if (urlHash) {
          jQuery('body,html').stop().scrollTop(0);
          setTimeout(function () {
            var target = jQuery(urlHash);
            var position = target.offset().top - headerHeight;
            jQuery('body,html').stop().animate({ scrollTop: position }, 500);
          }, 100);
        }
      }) 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　// ここ
      jQuery('a[href*="#"]').click(function () {                             // ここ
        var href = '#' + jQuery('this').attr("href").split('#')[1];   // ここ

        var target = jQuery(href);
        var position = target.offset().top - headerHeight;
        jQuery('body,html').stop().animate({ scrollTop: position }, 500);
        return false;
      });
    });

---

コメントを受けて再々々修正

    jQuery(function () {
      var headerHeight = jQuery('header').outerHeight();
      jQuery('#js-header-slider').on('init', () => { 　　　　　　　　　// ここ
        var urlHash = location.hash;
        if (urlHash) {
          jQuery('body,html').stop().scrollTop(0);
          setTimeout(function () {
            var target = jQuery(urlHash);
            var position = target.offset().top - headerHeight;
            jQuery('body,html').stop().animate({ scrollTop: position }, 500);
          }, 100);
        }
      }) 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　// ここ
      jQuery('a[href*="#"]').click(function () {                             // ここ
        var href = '#' + jQuery(this).attr("href").split('#')[1];   // ここ

        var target = jQuery(href);
        var position = target.offset().top - headerHeight;
        jQuery('body,html').stop().animate({ scrollTop: position }, 500);
        return false;
      });
    });

Comments

[saku615]

ありがとうございます！

実際に入れてみましたが以下のようになりました。

・トップページ上だとスムーズスクロールが効かないが、下層ページからトップページのコンテンツに飛ぶとスムーズスクロールが効く

[Lhankor_Mhy]

あー、そうか。
修正します。

[Lhankor_Mhy]

修正を追記しました。これは疲れた！

[saku615]

ありがとうございます。
修正しましたが状況変わらずでした…
何度もやっていただいたのに申し訳ないです…

[Lhankor_Mhy]

そうですか、当方では解決したので、そうすると本番サイトの方にだけまた別の原因が組み合わさっているのかもしれないですね。

[Lhankor_Mhy]

テスト用のサイトでは、メニューのリンクが絶対リンクでしたが、本番サイトではそうではないのですよね？

[saku615]

いえ、本番サイトでも絶対リンクになります。理由としては下層のページからトップページのコンテンツに遷移するパターンがあるためです。

テストサイトでの例：お知らせ一覧ページからトップページのmenu1のコンテンツに飛ぶ場合

ただ現状、下層ページから遷移する場合はうまくいくのと、絶対リンクではなく#○○だとトップページでもうまくいくので、トップページ用と下層ページ用の2つのヘッダーを用意して対応しようと思います。

トップページのヘッダー：リンクは全て「#○○」
下層ページ用のヘッダー：リンクは全て絶対パスで「https://hogehoge.com/#○○」

[Lhankor_Mhy]

絶対パスで書かれていては、そもそも jQuery('a[href^="#"]') にヒットしないのではないですか？
これは、href が # から始まるという意味なので。

[saku615]

実現したいことの中に「下層ページからでもスムーズに遷移すること」というのがあるので、絶対パスで書く必要があるんですよね…。

下記ページを参考にしましたがこちらの外部ページへのリンクでも絶対パスを使用しているので大丈夫かと思い…。
https://125naroom.com/web/3476

[Lhankor_Mhy]

では、そっちの部分のスクリプトも変更する必要があるのですね。
理解しました。

[Lhankor_Mhy]

追記しました。

[saku615]

ありがとうございます。

試してみたところ、下層ページからは変わらずスクロールできました。

ただそれ以降メニューをクリックすると該当するコンテンツではなく、最初のコンテンツにスクロールしてそれ以降はスクロールしなくなってしまいました。

下層ページからメニュー2(https://hogehoge.com/#menu02)をクリックするとコンテンツ2(id="menu02")に飛ぶのですが、例えばそれ以降トップページにいる状態でメニュー3をクリックしても何故かコンテンツ1にスクロールしてそれ以降はどのメニューをクリックしてもスクロールしない状態になります。

[Lhankor_Mhy]

コンテンツ１というのはなんですか？
メニュー１でリンクされているアンカー、というようなイメージで合っていますか？

[Lhankor_Mhy]

ああ、そうか、そういうことね。

[Lhankor_Mhy]

追記しました。

[saku615]

>>メニュー１でリンクされているアンカー、というようなイメージで合っていますか？
そうです！

本当にありがとうございます…
下層から遷移してきても各メニューに対応したコンテンツに移動するようにはなりました。
ただスムーズスクロールしない感じです…

[Lhankor_Mhy]

> ただスムーズスクロールしない感じです…

その問題は再現しませんでした。
もしかすると、本番環境ではローディング画面が消える前にスクロールしてしまっているのかもしれませんね。

[saku615]

すみません、ちょっと説明が下手でした。
下層からトップページに遷移するときはスムーズスクロールするのですが、その後トップページ上で他のコンテンツに飛ぼうとするとスクロールせずに飛ぶといった感じです。

[Lhankor_Mhy]

「他のコンテンツ」とは、たとえばこのページのようなことですか？
https://ykworks.net/wp/event/sample-event1/

[saku615]

いえ、下層ページのコンテンツではなく、トップページにある各セクションのことです。

一旦わかりやすいようにテストサイトのメニューの名称とスクロールする位置を設定しました。

現状、下層ページからABOUTをクリックするとページ遷移してABOUTのところにスムーズスクロールするのですが、そこからトップページの別のコンテンツ(INTERVIEWやBLOGなど)に移動する際にはスムーズスクロールが効かない状態になっています。

[Lhankor_Mhy]

当方では問題が再現しませんでした。

[Lhankor_Mhy]

あー、貼り付けたコードが間違っていたようです。修正します。

[saku615]

無事に動くようになりました！
本当に助かりました！

何度もお付き合いいただき申し訳ございません。
本当にありがとうございます！

[Lhankor_Mhy]

お役に立てたようで何よりです

Answer 2

エラーでてませんか？

Comments

[saku615]

別のサーバーでwordpressを構築して同じテーマを適用して試してみたところ、以下のエラーが出ていました。

TypeError: undefined is not an object (evaluating 'target.offset().top')