浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【JavaScript】特定の要素の位置までページをスクロールする

昨日投稿した記事「【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 で特定の要素の位置までページをスクロールする方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)