指定の要素までスクロール(scrollIntoView)
今回はJavascriptで指定の要素までスクロールするコードをご紹介します。
ポイントはscrollIntoViewです。
それでは早速、解説も含めて例を挙げてご紹介していきます。
▽指定の要素までスクロールするコード
- <div id="hoge">指定の要素</div>
- document.getElementById("hoge").scrollIntoView(true);
▽実際の動作はこちら▽
コードの解説
テキストボックス内をスクロールして下げていくと、
「指定の要素」とそのあとに「ボタン」が配置されています。
この「ボタン」をクリックして押してみると、「指定の要素」までスクロールされ、表示することができます。
このようにスクロールを実装するには「.scrollIntoView()」を使います。
ここではid=”hoge”を指定の要素としていますので「document.getElementById(“hoge”)」としています。
まとめ
- スクロールには「.scrollIntoView()」を使う
- 要素の指定は「document.getElementById(“hoge”)」
いかがでしたでしょうか?
今回はJavascriptで指定の要素までスクロールするscrollIntoViewをご紹介しました。
以上、「(Javascript)指定の要素までスクロール(scrollIntoView)」でした。