[メモ] JSで実装するidへのジャンプ

クリックして指定のidへ飛ぶことをanchor scrollと呼びます。ライブラリを使っていれば実装されていることが多いですが、望む動きをしてくれなかったので、JSだけで実装する方法を検証します。

固定ヘッダーがない場合

const jumpTo = (id) => {
  const elem = document.getElementById(id);
  if (elem) {
    const top = elem.getBoundingClientRect().top;
    const newY = window.scrollY + top;
    console.log(newY);
    window.scrollTo(0, newY);
  }
}

このサンプルのコードはこちらで確認できます。

固定ヘッダーがある場合

const HEADER_HEIGHT = 56;
const jumpTo = (id) => {
  const elem = document.getElementById(id);
  if (elem) {
    const top = elem.getBoundingClientRect().top;
    const newY = window.scrollY + top - HEADER_HEIGHT;
    console.log(newY);
    window.scrollTo(0, newY);
  }
}

このサンプルのコードはこちらで確認できます。

とりあえずコードだけで。詳細なコードの説明は後ほど。