scrollIntoViewとは？

scrollIntoViewとは？

scrollIntoViewとは？

Webページをスクロールする際、特定の要素の位置までスムーズに移動したい場合があります。そんな時に便利なのが `scrollIntoView()` メソッドです。このメソッドを使うことで、指定した要素が表示範囲に入るように、ページを自動でスクロールさせることができます。

基本的な使い方

`scrollIntoView()` メソッドは、対象となる要素に対して呼び出すことができます。例えば、IDが "target" の要素を表示範囲にスクロールしたい場合は、以下のコードを実行します。


<script>
document.getElementById("target").scrollIntoView();
</script>

引数について

`scrollIntoView()` メソッドは、オプションとして引数を取ることができます。引数を省略するか `true` を指定した場合は、要素が**上端**に来るようにスクロールします。一方、`false` を指定した場合は、要素が**下端**に来るようにスクロールします。

引数 説明
省略または true 要素が上端に来るようにスクロール
false 要素が下端に来るようにスクロール

使用例

以下は、`scrollIntoView()` を使った具体的な例です。ボタンをクリックすると、対応するセクションにスクロールします。


<button onclick="document.getElementById('section1').scrollIntoView()">セクション1へ移動</button>
<button onclick="document.getElementById('section2').scrollIntoView({ behavior: 'smooth', block: 'end' })">セクション2へスムーズに移動（下端）</button>

<section id="section1" style="height: 500px; background-color: #f0f0f0;">
  <h2>セクション1</h2>
</section>

<section id="section2" style="height: 500px; background-color: #e0e0e0;">
  <h2>セクション2</h2>
</section>

参考資料

* Element.scrollIntoView() - Web API | MDN

よくある質問

  • Q. スクロールをスムーズに行うには？

    A. 引数にオブジェクトを渡し、behavior: 'smooth' を指定することでスムーズなスクロールを実現できます。

  • Q. スクロール位置を要素の上端ではなく中央に合わせるには？

    A. `scrollIntoView()` 単体では中央に合わせるオプションはありません。JavaScriptで要素の位置を取得し、`window.scrollTo()` などと組み合わせて調整する必要があります。

  • Q. 特定のブラウザで動作しません。

    A. `scrollIntoView()` は主要なブラウザでサポートされていますが、古いブラウザでは動作しない場合があります。対応状況については、MDNなどのリファレンスサイトで確認してください。

その他の参考記事:jquery スクロール 位置