最終更新日：2021.09.07

ページ内リンクと、ページ外リンクを別々に処理するjavascript

ページ内に設置したアンカーリンクのアニメーションと、ページ内で別ページに推移するアニメーション、ページ外へのリンクを判定して処理する場合は以下。jQuery版なのでJavascriptのものを今後作りたい。

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;
    }
  });

参考サイトはこちら