同ページ内リンクで遷移したとき、jQueryで固定ヘッダー分の高さ合わせをしたい（レスポンシブ対応）

Question

現在の状況

jQueryにて、a href=“xxx.html#sample” のようなid指定付きリンクを使用したときに、固定されたヘッダーの高さ分を調整して飛ぶようなコードを組んでいます。
レスポンシブ対応で、ウインドウの横幅に応じて固定ヘッダーの高さが変わるので、ヘッダーの高さは条件分岐で設定しています。
使用コードは以下です。

// 別ページからのリンクで高さ合わせ
$(window).on('load', function() {
  var windowWidth = $(window).width();
  var windowSm = 767; // スマホに切り替わる横幅
    if (windowSm >= windowWidth) {
     var headerHeight = 80; // スマホのheaderの高さ
   }  else {
     var headerHeight = 140; // pcのheaderの高さ
    }
  if(document.URL.match("#")) {
  var str = location.href ;
  var cut_str = "#";
  var index = str.indexOf(cut_str);
  var href = str.slice(index);
  var target = href;
  var position = $(target).offset().top - headerHeight;
  $("html, body").scrollTop(position);
  return false;
}
});

// ページ内リンクで高さ合わせ
jQuery(function(){
  var windowWidth = $(window).width();
  var windowSm = 767; // スマホに切り替わる横幅
    if (windowSm >= windowWidth) {
     var headerHeight = 80; // スマホのheaderの高さ
   }  else {
     var headerHeight = 140; // pcのheaderの高さ
    }
    jQuery('a[href^="#"]').click(function() {
    var speed = 500;
    var href= jQuery(this).attr("href");
    var target = jQuery(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top-headerHeight;
    jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
   });
});

参照：
https://bn-ic.sakura.ne.jp/memo/menu_fixed
https://webcreator.me/blog/427/

起きている問題

別ページに飛んだときは正しく動作し、ヘッダー分の高さだけ位置をずらして飛ぶことができています。レスポンシブにも対応できました。
しかし、同ページ内で遷移したときに高さの調節が効いていないようで、idを指定しているdivセクションのh2見出しがheaderに隠れてしまいます。

補足情報

jQueryバージョンは3.4.1です。

お力を貸していただけたら幸いです。よろしくお願いします。

2019.10.15追記

ご指摘がありましたので、当該html/cssも載せます。
SSIによってメニューバーを含むヘッダーを共通化しています。サーバーはロリポップ！です。

index.htmlが以下。

<!--#include virtual="./header.html" -->

<div class="container" id="1">
  <div class="row">
    <h2>見出し1</h2>
    ここにコンテンツ1
  </div>
</div>

<div class="wrapper" id="2">
  <div class="container">
    <div class="row">
    <h2>見出し2</h2>
      ここにコンテンツ
    </div>
  </div>
</div>

SSIで呼び出しているheader.htmlが以下。

<header>
  <nav>
    <div class="container">
      <div class="row">
         <div class="col-md-4">
           <h1><a href="index.html">サイトタイトル</a></h1>
         </div>
         <div class="col-md-8">
            <ul class="d-none d-md-flex">
             <li><a href="works.html">リスト1</a></li>
             <li><a href="index.html#1">リスト2</a></li>
             <li><a href="index.html#2">リスト3</a></li>
             <li><a href="mailform.html">メールフォーム</a></li>
           </ul>
         </div>
      </div>
  </nav>
</header>

header.htmlは、index.html以外のページにおいても、SSIを用いて共通パーツとして呼び出しています。

ヘッダーを固定するのは、ある程度スクロールしたらnavに.is-fixedクラスを付与する形で行っています。jsおよびCSSは以下。

    $(function() {
var $win = $(window),
    $main = $('main'),
    $nav = $('nav'),
    navHeight = $nav.outerHeight(),
    navPos = $nav.offset().top,
    fixedClass = 'is-fixed';

$win.on('load scroll', function() {
  var value = $(this).scrollTop();
  if ( value > navPos ) {
    $nav.addClass(fixedClass);
    $main.css('margin-top', navHeight);
  } else {
    $nav.removeClass(fixedClass);
    $main.css('margin-top', '0');
  }
});
});

.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow: 0px 0px 6px 3px rgba(79, 79, 79, 0.26);
}

なお、CSSでのheader・navのheight値の指定はしていません。

高さ合わせが上手くいく例
◯works.htmlにいる状態で、index.html#2へのリンクをクリックする（別ページ遷移）

高さ合わせが上手くいかない例
×index.htmlにいる状態で、index.html#2へのリンクをクリックする（同ページ内遷移）

Comments

[x_x]

問題が再現する HTML・CSS も書いてください。

[gtgt]

質問に追記する形で書きました。
ご確認よろしくお願いします。

[x_x]

h2 がないようですが

[gtgt]

コードおよび質問文を修正しました。
最初の質問文に「idを指定しているh2見出しが隠れる」とありましたが、「idを指定しているdivセクションのh2見出しが隠れる」の誤りでした。
現状、idを指定しているのはh2ではなくdivです。（当初はh2にid指定していましたが、見出しが隠れることを受けてdivに指定し直しました。その名残でh2にidを指定している、との書き方をしてしまいました。大変失礼いたしました）

Answer 1

'a[href^="#"]' というのは属性値が "#" で始まることを前提とした簡易処理なので、前提がない場合はちゃんと判定する必要があります。

  var documentUrl = location.origin + location.pathname + location.search;
  jQuery(document).on('click', 'a[href*="#"]', function(event) {
    var anchor = event.currentTarget;
    var anchorUrl = anchor.protocol + '//' + anchor.host + anchor.pathname + anchor.search;
    if (documentUrl !== anchorUrl) {
      return true;
    }

    var speed = 500;
    var position = $(anchor.hash).offset().top - headerHeight;
    jQuery('body,html').animate({ scrollTop: position }, speed, 'swing');
    event.preventDefault();
    return false;
  });

https://developer.mozilla.org/ja/docs/Web/API/Location
https://developer.mozilla.org/ja/docs/Web/API/HTMLHyperlinkElementUtils

関連：
https://teratail.com/questions/118836
https://teratail.com/questions/198796

Comments

[gtgt]

ご回答いただいたコードにて、意図したとおりの挙動をするようになりました。
参考URLも活用させていただきます。
丁寧な対応、ありがとうございました。