【JavaScript】指定した要素までスクロールするScrollIntoViewのご紹介

1. JavaScriptのスクロール処理

WebシステムをJavaScript開発していると案外必要となるのがスクロール位置の調整。 scrollTopメソッドを利用して自動縦スクロールを実現できますが、スクロール量を計算したり、とても大変。。。 そこで便利なのがScrollIntoViewメソッドです。

2. 指定したエレメントまで自動スクロールしてくれるScrollIntoViewメソッド

ScrollIntoViewメソッドは指定したエレメントまで自動でスクロールしてくれます。

var element = document.getElementById('element');

element.scrollIntoView(); 

3. ScrollIntoViewメソッドでスムーズにスクロールする

スマートフォンのWebアプリでよく使われるスムーズスクロール。スクロール時にアニメーションを追加することで柔らかい印象になります。ScrollIntoViewメソッドはスムーズスクロールに対応しており、たった一文追加するだけで簡単に実装可能です。

element.scrollIntoView({
  behavior: 'smooth'
});