昨日投稿した記事「【React】Reactでページ内リンクを実装できるライブラリ「react-router-hash-link」」と似たようなことを JavaScript で行う方法についてです。
「react-router-hash-link」ライブラリを使うと、ページ内リンクを簡単に実装できますが、私の環境では指定した要素までページスクロールするのを、JavaScript 側で発火させて実行したかったため、こちらは残念ながら不採用に…。
代わりに JavaScript の scrollIntoView() メソッドを利用しました。
今回参考にさせていただいた記事はこちらから。
Element.scrollIntoView() – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView
さて実装方法ですが、下記のとおりとても簡単です！
const element = document.getElementById("要素ID");
element.scrollIntoView();
上記のように、ID で特定の要素を取得後、それに対して scrollIntoView() を実行するだけで、その要素の位置までスクロールしてくれます。
また、オプションを指定すれば、スイーっとスムーズにスクロールするアニメーションも指定できるようです。
その時の記述方法は下記のとおりです。
const element = document.getElementById("要素ID");
element.scrollIntoView({behavior: "smooth"});
ただ、開発しているプロジェクトでは、今回はスムーズなスクロールは不要だったので、上記は未検証です。
以上、JavaScript で特定の要素の位置までページをスクロールする方法についてでした。
ご参考になれば幸いです。
