【JavaScript】「ページ内スクロール」と「トップに戻る」を同時に実装する方法

html{
  scroll-behavior: smooth;
  scroll-margin-top: 60px; //固定ヘッダーの高さ
}

<div class="p-scroll">
  <nav class="p-scroll__nav">
    <ul class="p-scroll__list">
      <li class="p-scroll__item"><a class="p-scroll__link" href="#section01">section1</a></li>
      <li class="p-scroll__item"><a class="p-scroll__link" href="#section02">section2</a></li>
      <li class="p-scroll__item"><a class="p-scroll__link" href="#section03">section3</a></li>
      <li class="p-scroll__item"><a class="p-scroll__link" href="#section04">section4</a></li>
      <li class="p-scroll__item"><a class="p-scroll__link" href="#section05">section5</a></li>
    </ul>
  </nav>
  <section class="p-scroll__section p-scroll__section--01" id="section01"><span class="p-scroll__section-text">SECTION1</span></section>
  <section class="p-scroll__section p-scroll__section--02" id="section02"><span class="p-scroll__section-text">SECTION2</span></section>
  <section class="p-scroll__section p-scroll__section--03" id="section03"><span class="p-scroll__section-text">SECTION3</span></section>
  <section class="p-scroll__section p-scroll__section--04" id="section04"><span class="p-scroll__section-text">SECTION4</span></section>
</div>
<div class="p-scroll__top"><a class="p-scroll__top-link" href="#">↑</a></div>
<div class="p-scroll__footer"><span class="p-scroll__footer-text">FOOTER</span></div>
</div>

const smoothScroll = (gapPC = 0, gapSP = 0) => {
  const mediaSp = window.matchMedia('(max-width: 560px)');
  let gap;
  if (mediaSp.matches) {
    gap = gapSP;
  } else {
    gap = gapPC;
  }

  const positionSet = (elem, _gap) => {
    const targetElement = document.getElementById(elem.replace('#', ''));
    if (!targetElement) {
      return undefined;
    }
    const rect = targetElement.getBoundingClientRect().top;
    const offset = window.pageYOffset;
    const target = rect + offset - _gap;
    return target;
  };

  // URLのハッシュ部分（#以降）を取得
  const urlHash = window.location.hash;
  // URLにハッシュ部分があれば…
  if (urlHash) {
    setTimeout(() => {
      // スクロール先の要素が見つからない場合は…
      if (positionSet(urlHash, gap) === undefined) {
        // アラートを出す
        alert('移動先が見当たりません');
        // スクロール先の要素があれば…
      } else {
        window.scrollTo({
          top: positionSet(urlHash, gap), // ハッシュ値と固定headerの余白分から移動距離を取得
          // 別ページのときはスムーススクロールせずに移動
        });
      }
    }, 0);
    // URLにハッシュ部分が無ければ…
  } else {
    // a要素でリンク先に#が設定されている要素を全て取得
    const smoothScrollTrigger = document.querySelectorAll('a[href^="#"]');
    // もし要素がなければ処理終了
    if (!smoothScrollTrigger.length) return;
    // 取得した要素の数だけループ
    for (let i = 0; i < smoothScrollTrigger.length; i = i + 1 || 0) {
      // 要素１つ１つにクリックイベントを設定
      smoothScrollTrigger[i].addEventListener('click', (e) => {
        // クリックイベントの初期動作を停止
        e.preventDefault();
        // 要素からhrefに設定されている値を取得
        const href = smoothScrollTrigger[i].getAttribute('href');
        let targetPosition;
        // hrefの値が#のみなら…
        if (href === '#') {
          // トップに戻すため0を設定
          targetPosition = 0;
          // スクロール先が見つからない場合は…
        } else if (positionSet(href, gap) === undefined) {
          // アラートを出す
          alert('移動先が見当たりません');
          /// スクロール先の要素があれば…
        } else {
          targetPosition = positionSet(href, gap); // ハッシュ値と固定headerの余白分から移動距離を取得
        }

        window.scrollTo({
          top: targetPosition, // 移動距離を設定
          behavior: 'smooth', // ページ内ではスムーススクロールを設定
        });
      });
    }
  }
};

smoothScroll(); //smoothScrollを実行

smoothScroll(60); //60px分、位置を調整して移動する

smoothScroll(60,30); //PCは60px、SPは30px分、調整して移動する

  const mediaSp = window.matchMedia('(max-width: 560px)'); //560px以下の場合
  let gap;
  if (mediaSp.matches) {
    gap = gapSP;
  } else {
    gap = gapPC;
  }