技術ブログ

プログラミング、IT関連の記事中心

ピュアなJavaScriptで指定のオブジェクトまでスクロールする方法【JavaScript】

■はじめに

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

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

■手順

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

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

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

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

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