【jQuery】固定ヘッダーでページ内リンクのジャンプ先の位置を調整する方法

<header class="header js-header">
  <nav>
    <ul>
      <li><a href="#about">ABOUT</a></li>
      <li><a href="#works">WORKS</a></li>
      <li><a href="#gallery">GALLERY</a></li>
      <li><a href="#service">SERVICE</a></li>
    </ul>
  </nav>
</header>
<main>
  <section id="about" class="section01">ABOUT</section>
  <section id="works" class="section02">WORKS</section>
  <section id="gallery" class="section03">GALLERY</section>
  <section id="service" class="section04">SERVICE</section>
</main>

// ヘッダーの高さ分だけコンテンツを下げる
$(function () {
  const height = $(".js-header").height();
  $("main").css("margin-top", height);
});
// ページ内スクロール
$(function () {
  // ヘッダーの高さ取得
  const headerHeight = $(".js-header").height();
  $('a[href^="#"]').click(function () {
    const speed = 600;
    let href = $(this).attr("href");
    let target = $(href == "#" || href == "" ? "html" : href);
    // ヘッダーの高さ分下げる
    let position = target.offset().top - headerHeight;
    $("body,html").animate({ scrollTop: position }, speed, "swing");
    return false;
  });
});

// ヘッダーの高さ取得
const headerHeight = $(".js-header").height();

// ヘッダーの高さ分下げる
let position = target.offset().top - headerHeight;

$(function () {
  // ヘッダーの高さを取得
  const height = $(".js-header").height();
  // ヘッダーの高さ分コンテンツを下げる
  $("main").css("margin-top", height);
  // ページ内スクロール
  $('a[href^="#"]').click(function () {
    const speed = 600;
    let href = $(this).attr("href");
    let target = $(href == "#" || href == "" ? "html" : href);
    // ヘッダーの高さ分下げる
    let position = target.offset().top - height;
    $("body,html").animate({ scrollTop: position }, speed, "swing");
    return false;
  });
});

html {
  scroll-padding-top: 50px; /* ヘッダーの高さ */
}