JavaScriptでページ内リンクにスクロールする方法

ページ内リンクへの移動をjavascriptでやる方法が通常のaタグで行うのとは違う感じだったので、関数を作ってさっくりできるようにしてみました。

ついでに移動先を微調整できるようにしました。idの位置よりちょっと上にしたりできるのでヘッダーなどを固定していてもずらして表示できます。

function scrollToID(id, margin){
  const elm = document.getElementById(id);
  if(!elm){
    console.error("idが見つかりません");
    return;
  }
  if(!margin) margin = 0;
  window.scrollTo({ 
    top: elm.offsetTop + margin, 
    behavior: 'smooth' 
  });
}

引数に移動先のidを入れてください。marginはidよりちょっと上に移動したい場合にマイナスの値を入れてください。marginは省略可能です。

使うときは要素にonclickで実行するようにすればOKです。