【HTML】(Javascript)指定の要素までスクロール(scrollIntoView)

スポンサーリンク

指定の要素までスクロール(scrollIntoView)

今回はJavascriptで指定の要素までスクロールするコードをご紹介します。
ポイントはscrollIntoViewです。

それでは早速、解説も含めて例を挙げてご紹介していきます。

▽指定の要素までスクロールするコード

  1. <div id="hoge">指定の要素</div>
  2. document.getElementById("hoge").scrollIntoView(true);

▽実際の動作はこちら▽


指定の要素

コードの解説

テキストボックス内をスクロールして下げていくと、
「指定の要素」とそのあとに「ボタン」が配置されています。
この「ボタン」をクリックして押してみると、「指定の要素」までスクロールされ、表示することができます。

このようにスクロールを実装するには「.scrollIntoView()」を使います。
ここではid=”hoge”を指定の要素としていますので「document.getElementById(“hoge”)」としています。

まとめ

  • スクロールには「.scrollIntoView()」を使う
  • 要素の指定は「document.getElementById(“hoge”)」

いかがでしたでしょうか?
今回はJavascriptで指定の要素までスクロールするscrollIntoViewをご紹介しました。

以上、「(Javascript)指定の要素までスクロール(scrollIntoView)」でした。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする