ページ外リンク、ページ内リンクのアンカーリンク

Question

メニューをインクルードしているのでのリンクをルートパスで書きたいです。
「ページ１」外のページから「ページ１の#link(アンカーリンク)」にリンクさせるとうまくいくのですが、
「ページ１」内でメニューの#link(アンカーリンク)をクリックすると、「ページ遷移時js」が発動します。
そしてページ内リンクのアニメーションが効かずにアンカーに飛ばされます。

したいことは。
リンクのルートパスのまま、ページ外リンク、ページ内リンクで固定ヘッダーのズレ分のアンカーリンクをうまく動作させたいです。

ご教授ください。

<ul id="global">
<li><a href="/demo/sample/#link">ページ１</a></li>
<ul>

下記を使い

ページ遷移時js

$(function() {
  // ハッシュリンク(#)と別ウィンドウでページを開く場合はスルー
  $('a:not([href^="#"]):not([target])').on('click', function(e){
    e.preventDefault(); // ナビゲートをキャンセル
    url = $(this).attr('href'); // 遷移先のURLを取得
    if (url !== '') {
      $('body').addClass('fadeout');  // bodyに class="fadeout"を挿入
      setTimeout(function(){
        window.location = url;  // 0.8秒後に取得したURLに遷移
      }, 500);
    }
    return false;
  });
});

ページ外リンク

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

ページ内リンク

$(function () {
 var headerHight = 80; //ヘッダの高さ
 $('a[href^=#]').click(function(){
     var href= $(this).attr("href");
       var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす
     $("html, body").animate({scrollTop:position}, 550, "swing");
        return false;
   });
});

Answer 1

以前同様の質問に回答しました。
https://teratail.com/questions/216679

  var documentUrl = location.origin + location.pathname + location.search;
  $(document).on('click', 'a[href]', function(event) {
    var anchor = event.currentTarget;
    if (anchor.target !== '' && anchor.target !== window.name) {
      return true;
    }

    var anchorUrl = anchor.protocol + '//' + anchor.host + anchor.pathname + anchor.search;
    if (documentUrl !== anchorUrl) {
      $('body').addClass('fadeout');
      setTimeout(function(){
        window.location = anchorUrl;
      }, 500);

      return false;
    }

    if (anchor.hash !== '') {
      var position = $(anchor.hash).offset().top - headerHeight; // スペリング注意。
      $('body,html').animate({ scrollTop: position }, 550, 'swing');
      event.preventDefault();
      return false;
    }
  });

Answer 2

提示されているコードより前に当該ページのパスをhrefから削除してしまえば、特にコードを変えることなく動くと思います。

// 他のコードが動く前
$( 'a[href^="' + Document.location.pathname + '#"]' ).each( function() {
  // hrefから#より前を削除する
} );

【Location - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Location

Location.pathname

URL のパス部分を、先頭の '/' を含めて収めた DOMString です。