【WordPress】【jQuery】ページ内リンクをページ外からでもスムーズにスクロールさせる方法

Question

前提・実現したいこと

ページ内リンクをページ外からでもスムーズにスクロールさせる方法が知りたいです。

現在、サイトをWordPressで運用するために、自作テーマを使用しています。
ヘッダー部分を共通化するために、header.phpにトップページや下層ページのナビゲーションを用意していますが、
aタグが一緒になっているため、下層ページのスムーズスクロールができません。

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

下層ページでヘッダーのリンクをクリックしてもページに移動しません。
表示は下層ページのままで、アドレスは(下層ページ/#クリックしたリンクID)になっています。

トップページでのページ内リンク移動、スムーススクロールは動作してます。
上部へ移動するボタンは全てのページで動作してます。

jQuery

 jQuery(function(){
        var headerHeight = 50; // ヘッダーについているID、クラス名など、余白を開けたい場合は + 10を追記する。
        var urlHash = location.hash; // ハッシュ値があればページ内スクロール
        if(urlHash) { // 外部リンクからのクリック時
            jQuery('body,html').stop().scrollTop(0); // スクロールを0に戻す
            setTimeout(function(){ // ロード時の処理を待ち、時間差でスクロール実行
            var target = jQuery(urlHash);
            var position = target.offset().top - headerHeight;
            jQuery('body,html').stop().animate({scrollTop:position}, 400); // スクロール速度ミリ秒
            }, 100);
        }
        
        jQuery('a[href^="##]').click(function(){ // 通常のクリック時
            var href= jQuery(this).attr("href"); // ページ内リンク先を取得
            var headerHeight = 50;
            var speed = 400;
            var target = jQuery(href);
            var position = target.offset().top - headerHeight;
            jQuery('body,html').animate({scrollTop:position}, speed,'swing'); // スクロール速度ミリ秒
            return false; // #付与なし、付与したい場合は、true
        });
    });

header.phpのナビ部分

<nav class="header0">
    <ul class="header_menu">
        <li><a href="#hoge">トップページ内リンク1</a></li>
        <li><a href="#fuga">トップページ内リンク2</a></li>
    </ul>
</nav>

###デベロッパーツールでの確認
Chromeで確認したところ、特にエラーなどは表示されておりません。

この方法ではトップページか下層ページのどちらか一方のみでしか表示できないのでしょうか？
足りない情報などあれば、すぐに記載いたしますので、ご教授のほど宜しくお願いいたします。

Answer 1

下記は自ページのアンカーへのリンクになります。

<li><a href="#hoge">トップページ内リンク1</a></li>

リンク先のページのURLをアンカーの前に記述してください。

<li><a href="/#hoge">トップページ内リンク1</a></li>

Comments

[ilaipa_]

ご返信いただきありがとうございます！

無事解決いたしました！ありがとうございます。