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

■はじめに

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

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

■手順

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

var targetElement = document.getElementById("ID名");
window.scroll({
top: targetElement.getBoundingClientRect().top + window.pageYOffset,
behavior: "smooth"
});

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

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

コメントを残す