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 と競合しているようですね。