【Javascript】ページ内の指定の場所にスクロール

document.querySelectorAll('a[href*="#"]').forEach(link => {
  link.addEventListener('click', event => {
    event.preventDefault();

    const elmHash = link.getAttribute('href');
    const targetElement = document.querySelector(elmHash);

    if (targetElement) {
      const pos = targetElement.offsetTop;

      // スクロールアニメーション
      window.scrollTo({
        top: pos,
        behavior: 'smooth'
      });
    }
  });
});

ocument.querySelectorAll('a[href*="#"]').forEach(link => {...});:
- querySelectorAllメソッドを使用して、ページ内の全ての<a>要素を取得します。
- forEachメソッドを使用して、取得した各リンクに対して次の処理を実行します。
link.addEventListener('click', event => {...});:
- 各リンクにクリックイベントリスナーを追加します。
- event.preventDefault();でデフォルトのクリック動作（通常のリンク遷移）を無効化します。
const elmHash = link.getAttribute('href');:
- クリックされたリンクのhref属性を取得して、elmHashという変数に格納します。この中にはリンク先のセクションのID（例: #section1）が含まれます。
const targetElement = document.querySelector(elmHash);:
- elmHashで指定されたIDを持つ要素（セクション）をdocument.querySelectorを使って取得し、targetElementとして変数に格納します。
if (targetElement) { ... }:
- targetElementが正しく取得された場合に以下の処理を実行します。
const pos = targetElement.offsetTop;:
- ターゲット要素（セクション）の上部までの距離をoffsetTopプロパティを使って取得し、posとして変数に格納します。
window.scrollTo({ top: pos, behavior: 'smooth' });:
- window.scrollToメソッドを使用して、ページを指定された位置（pos）までスクロールさせます。
- behavior: 'smooth'を指定することで、スムーズなスクロールアニメーションが適用されます。