WPでのページ外アンカーリンクが動かない

Question

テーマを自作。
ヘッダー内にあるナビゲーションのリンク先を
トップページ(front-pade.php)内でのアンカーリンクにしてます。
また、スムーススクロールと位置調整の設定をjQueryで行ってます。

前提・実現したいこと

記事単体のページ(single.php)にいる時にヘッダーをクリックすると
トップページのアンカーリンクに飛ぶようにしたいです。
またアンカーリンク先の位置調整の数値がリンク先によって異なるため以下のように記述したのですが
より短縮化できるなどありましたらご教授いただけますでしょうか。

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

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

---

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

jQuery

		$(function() { //上部へ移動するボタン
			var pagetop = $('#page_top');   
			pagetop.hide();
			$(window).scroll(function () {
				if ($(this).scrollTop() > 800)
					pagetop.fadeIn();
				} else {
					pagetop.fadeOut();
				}
			});
			pagetop.click(function () {
				$('body,html').animate({
					scrollTop: 0
				}, 500);
				return false;
			});
		});
		$(function(){ //ページ内リンク1の処理
		var urlHash = location.hash;
		if(urlHash) {
			$('body,html').stop().scrollTop(0);
			setTimeout(function(){
				var target = $(urlHash);
				var position = target.offset().top + 450;
				$('body,html').stop().animate({scrollTop:position}, 300,'swing');
			}, 100);
		}
			$('a[href*="#hoge"]').on('click',function() {
			var href= $(this).attr("href");
			var target = $(href);
				var position = target.offset().top + 450;
			$('body,html').animate({scrollTop:position}, 300, 'swing');
			return false;
			});
		});
		$(function(){//ページ内リンク2の処理
		var urlHash = location.hash;
		if(urlHash) {
			$('body,html').stop().scrollTop(0);
			setTimeout(function(){
				var target = $(urlHash);
				var position = target.offset().top + -30;
				$('body,html').stop().animate({scrollTop:position}, 300,'swing');
			}, 100);
		}
			$('a[href*="#fuga"]').on('click',function() {
			var href= $(this).attr("href");
			var target = $(href);
				var position = target.offset().top - 30;
			$('body,html').animate({scrollTop:position}, 300, 'swing');
			return false;
			});
		});

header.phpのナビ部分

<nav class="header_right">
	<ul class="header_menu">
		<li><a href="#hoge">ページ内リンク1</a></li>
		<li><a href="#fuga">ページ内リンク2</a></li>
		<li><a href="<?php echo esc_url( home_url('/') ); ?>event">イベント</a></li>
	</ul>
</nav>

試したこと

wpプラグインの全てを停止、JavaScriptの停止

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

PHP/7.3.1
MySQL/5.7.25
作業環境/DreamWeaver2019・Google Chrome

デベロッパーツールでの確認

クロームで確認したところエラーは出ていませんが警告が22と表示されました。
ですが警告の内容がわからなかったので（添付のように表示されます）

Firefoxのデベロッパーツールで確認すると

このサイトはスクロールに対して配置を固定する効果が使用されています。
これは非同期パンで正しく動作しない可能性があります。
詳細は https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects を参照し、
関連するツールと機能の議論に参加してください。

と警告部分に表示されました。Firefoxでもエラーは確認されませんでした。

デベロッパーツールでの確認（確認ミスのため修正）

クロームで確認したところエラーは出ていませんが警告が22と表示されました。
ですが警告の内容がわからなかったので（添付のように表示されます）

Firefoxのデベロッパーツールで確認すると

~~このサイトはスクロールに対して配置を固定する効果が使用されています。
これは非同期パンで正しく動作しない可能性があります。
詳細は https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects を参照し、
関連するツールと機能の議論に参加してください。

と警告部分に表示されました。Firefoxでもエラーは確認されませんでした。

先ほどエラーはなかったと書きましたが間違いでした。
シングルページでアンカーリンクをクリックすると

TypeError: target.offset(...) is undefined

と表示されました。どちらをクリックしても同じエラーが出ます。

var position = target.offset().top + 450;

var position = target.offset().top -30;

に原因があると表示されます。
確認ミス申し訳ございません。

ご連絡遅くなってしまい申し訳ございません。
貼っていただいたURLでjsを記述し
ヘッダーのリンク頭に<?php echo esc_url(home_url( '/' )); ?>を追加、
以下のようにしました。

$(document).ready(function(){
		  //URLのハッシュ値を取得
		  var urlHash = location.hash;
			console.log(urlHash); //デバッグしてみる
		  //ハッシュ値があればページ内スクロール
		  if(urlHash) {
			//スクロールを0に戻しておく
			$('body,html').stop().scrollTop(0);
			setTimeout(function () {
			  //ロード時の処理を待ち、時間差でスクロール実行
			  scrollToAnker(urlHash) ;
			}, 100);
		  }

		  //通常のクリック時
		  $('a[href*="#"]').click(function() {
			//ページ内リンク先を取得
			var href= $(this).attr("href");
			//リンク先が#か空だったらhtmlに
			var hash = href == "#" || href == "" ? 'html' : href;
			//スクロール実行
			scrollToAnker(hash);
			return false;
		  });

		  // 関数：スムーススクロール
		  // 指定したアンカー(#ID)へアニメーションでスクロール
		  function scrollToAnker(hash) {
			var target = $(hash);
			var position = target.offset().top;
			$('body,html').stop().animate({scrollTop:position}, 500,'swing');
		  }
		})

<li><a href="<?php echo esc_url(home_url( '/' )); ?>#hoge">hoge</a></li>
<li><a href="<?php echo esc_url(home_url( '/' )); ?>#fuga">fuga</a></li>

ページ内、ページ外アンカーリンクは実装されました！ありがとうございます。
ですがページ内リンクでのスムーススクロールが実行されません。
console.log(urlHash);もページ外リンクでは#hoge、#fugaが表示されますが
topページだと何も表示されなくなってしまい以下のようなエラーが出ます。

jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: http://localhost/jver/#hoge
    at Function.se.error (jquery.min.js:2)
    at se.tokenize (jquery.min.js:2)
    at se.select (jquery.min.js:2)
    at Function.se [as find] (jquery.min.js:2)
    at k.fn.init.find (jquery.min.js:2)
    at new k.fn.init (jquery.min.js:2)
    at k (jquery.min.js:2)
    at scrollToAnker ((index):58)
    at HTMLAnchorElement.<anonymous> ((index):51)
    at HTMLAnchorElement.dispatch (jquery.min.js:2)

jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: http://localhost/jver/#fuga
    at Function.se.error (jquery.min.js:2)
    at se.tokenize (jquery.min.js:2)
    at se.select (jquery.min.js:2)
    at Function.se [as find] (jquery.min.js:2)
    at k.fn.init.find (jquery.min.js:2)
    at new k.fn.init (jquery.min.js:2)
    at k (jquery.min.js:2)
    at scrollToAnker ((index):58)
    at HTMLAnchorElement.<anonymous> ((index):51)
    at HTMLAnchorElement.dispatch (jquery.min.js:2)

どこをどうすればいいのかもわからなくなってしまいました。
スムーススクロールは諦めた方が良いでしょうか…

Comments

[CHERRY]

Webブラウザのデベロッパーツールでエラーや何かメッセージは出ていますか？

Answer 1

location.hashで取得した変数が本当に取得したいハッシュ値になっているかどうか
**console.log(urlHash);**で確認してみてください。#xxxxxxxxxとなっていないと、そのままセレクタに放り込んでもIDと認識してくれませんし、offsetメソッドが未定義というエラーが出ているなら、おそらくセレクタにならない値を指しているはずです。その場合はaタグに紐付いているhrefリンクそのものを入れないといけません。

        var urlHash = location.hash;
　　　　 console.log(urlHash); //デバッグしてみる
        if(urlHash) {
            $('body,html').stop().scrollTop(0);
            setTimeout(function(){
                var target = $(urlHash);
                var position = target.offset().top + -30;
                $('body,html').stop().animate({scrollTop:position}, 300,'swing');
            }, 100);
        }

ページ遷移時のページ内リンクのスムーススクロール

Answer 2

リンクされてるのがアンカーだけになっているので、その前に飛ばしたいページのURLが必要になりますね。

<nav class="header_right">
    <ul class="header_menu">
        <li><a href="<?php echo esc_url( home_url('/') ); ?>#hoge">ページ内リンク1</a></li>
        <li><a href="<?php echo esc_url( home_url('/') ); ?>#fuga">ページ内リンク2</a></li>
        <li><a href="<?php echo esc_url( home_url('/') ); ?>event">イベント</a></li>
    </ul>
</nav>

これで行けないですか？

Comments

[nmnm]

回答ありがとうございます。
早速記述をしてみてシングルページからの
アンカーリンクのスムーススクロールでの移動はできました。
ですがトップページのアンカーリンク移動時のスムーススクロールが動かないのと、
アンカーリンクがURLに付加される状態になってしまいました…
Firefoxのデベロッパーツールでは

Syntax error, unrecognized expression:

と記述されてます。