JavaScriptのみで指定のオブジェクトまでスクロールする方法

はじめに

ページ内リンク(スヌース)などで、たまに利用したのでその方法を記載します。

Reactを使用する場合など、jQueryなどが使用できない場合があると思いますので、ここではシンプルなJavaScriptで記載しています。

手順

ソースコードの全量は以下

var targetElement = document.getElementById("ID名");

window.scroll({
  top: targetElement.getBoundingClientRect().top + window.pageYOffset,
  behavior: "smooth"
});

1行目で、移動したいオブジェクトをID指定で取得する。

「window.scroll」で取得したオブジェクトまでの距離を計測して移動する。