内部ページリンクをJavaScriptでスムーススクーロールさせる方法に関して

Question

他の人がブログで公開されているものを参考にして、
内部ページリンクをJavaScriptでスムーススクーロール、およびTOPメニュー固定しているためヘッダーの高さも調整しています。
ブログ記事目次などの挙動はうまくいっているのですが、グローバルメニュー内の内部ページリンクだとうまく動作しません。
※スクロールでのリンクにならず、100px分下げている「var headerHeight = 100; //固定ヘッダーの高さ」この部分が機能していません。
Chromeのディベロッパーツールで確認してもエラーが出ていないため、原因がわかりません。
以下ソースを添付いたしますので、対処方法を教えていただないでしょうか？
よろしくお願いいたします。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
// ヘッダーメニュー
(function($) {
			$(function() {
				var $header = $('#top-head');

				// Nav Toggle Button
				$('#nav-toggle').click(function(){
					$header.toggleClass('open');
				});

				$('#global-nav a').on('click', function(){
            		if (window.innerWidth <= 768) {
                $('#nav-toggle').click();
            	}
        		});
			});
		})(jQuery);
// スムーズスクロール
$(function(){
	$('a[href^=#]').click(function() {
		var speed = 300;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var headerHeight = 100; //固定ヘッダーの高さ
		var position = target.offset().top - headerHeight; //ターゲットの座標からヘッダの高さ分引く
		$('body,html').animate({scrollTop:position}, speed, 'swing');
		return false;
	});
});
</script>

<header id="top-head">
    <div class="inner">
        <div id="mobile-head">
            <a href="https://yzan.jp/">
            <span class="logo"><img src="https://yzan.jp/wp-content/uploads/2018/01/logo.png"></span>
            </a>
            <div id="nav-toggle">
                <div>
                    <span></span>
                    <span></span>
                    <span></span>
                    <p class="mobile">メニュー</p>
                </div>
            </div>
        </div>
        <nav id="global-nav">
            <div class="menu-test-container">
                <ul id="menu-test" class="menu">
                    <li id="menu-item-426" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-426"><a href="//yzan.jp/#blog">Yzanブログ<span class="gf"></span></a></li>
                    <li id="menu-item-651" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-651"><a href="//yzan.jp/#philosophy">Yzanの理念<span class="gf"></span></a></li>
                    <li id="menu-item-652" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-652"><a href="//yzan.jp/#business">ビジネス<span class="gf"></span></a></li>
                    <li id="menu-item-653" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-653"><a href="//yzan.jp/#people">Yzanと人<span class="gf"></span></a></li>
                    <li id="menu-item-4698" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4698"><a href="https://yzan.jp/djyzan">DJわいざん official<span class="gf"></span></a></li>
                    <li id="menu-item-4699" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4699"><a href="https://yzan.jp/archives/category/popular_articles">人気記事<span class="gf"></span></a></li>
                    <div class="mobile nav_search">
                        <form role="search" method="get" id="searchform" class="searchform cf" action="https://yzan.jp/" >
                            <input type="search" placeholder="検索する" value="" name="s" id="s" />
                            <button type="submit" id="searchsubmit" ><i class="fa fa-search"></i></button>
                        </form>
                    </div>
                </ul>
            </div>
        </nav>
    </div>
</header>

Comments

[m.ts10806]

htmlもご提示願います

[pokomichi]

ご指摘ありがとうございます。html追記いたしました。

[m.ts10806]

「うまく動作しません」というのは具体的にどのような現象が起きているのでしょうか。　https://teratail.com/help/question-tips#questionTips3-4-1

Answer 1

ナビのaのhrefに余計なのが入ってて動作していないかも

    $('#global-nav a').click(function() {
        var speed = 300;
        var href= $(this).attr("href").match(new RegExp("#.+"));
        //var href= $(this).attr("href");
        var target = $(href[0] == "#" || href[0] == "" ? 'html' : href[0]);
        var headerHeight = 100; //固定ヘッダーの高さ
        var position = target.offset().top - headerHeight; //ターゲットの座標からヘッダの高さ分引く
        $('body,html').animate({scrollTop:position}, speed, 'swing');
        return false;
    });

Comments

[pokomichi]

回答いただきありがとうございます。

// スムーズスクロール
$(function(){
$('a[href^=#]').click(function() {
var speed = 300;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var headerHeight = 100; //固定ヘッダーの高さ
var position = target.offset().top - headerHeight; //ターゲットの座標からヘッダの高さ分引く
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});

↑
この部分は他のページで問題なく動いているのですが、いただいたソースを
$('#global-nav a').on('click', function(){
if (window.innerWidth <= 768) {
$('#nav-toggle').click();
}
});
});
この下に追加するのが良いのでしょうか？

[Dot]

$('a[href^=#]').click(function() {
....
})に上書きですよ

[Dot]

あ　外部リンクからだとだめかな？

[Dot]

外部からだとlocation.hash使わないとだめかな？
ページ遷移時のページ内リンクのスムーススクロール - Qiita
http://mksk.hatenadiary.com/entry/2016/09/09/230911

[pokomichi]

ありがとうございます。
上書きすると、各ブログ記事のアンカーリンクが動作しないのでいただいたソースを追記すると、グローバルメニューのスムーススクロールが動くようになりました。

また、追記していただいたソースなのですが、知識が乏しくてどうすれば「#global-nav a」に反映されるのかわかりません。
よろしければ合わせて教えていただけないでしょうか？
よろしくお願いします。

[Dot]

こっちだった
https://qiita.com/Garyuten/items/0454a14cbda320882997
気にならないなら不要かもです

[pokomichi]

返信遅くなってしまいすいません！
助かりました！
いろいろと細かい点までご教授いただき誠にありがとうございます！！！！