scrollIntoViewを用いたスムーススクロール
jsのscrollIntoView()というメソッドを使って簡単にスムーススクロールを作るデモです。
See the Pen 210215_scrollIntoViewのデモ by nekuta (@nekuta) on CodePen.
基本の使い方
var element = document.getElementById('demo');
element.scrollIntoView();elementを指定して、scrollIntoView()メソッドをつけるだけでその要素までスクロールしてくれます。現在スクロール速度の設定はできないようです。
オプション
behavior
スクロール時の動作
| auto | 既定値 |
| instant | アニメーションなし |
| smooth | アニメーションする |
block
縦方向のスクロール位置
| start | 既定値。要素が上端に来る様にスクロール |
| center | 要素が縦中央に来る様にスクロール |
| end | 要素が下端に来る様にスクロール |
| nearest | startかend、どちらか近い方にスクロール |
inline
横方向のスクロール位置
| start | 要素が左端に来る様にスクロール |
| center | 要素が横中央に来る様にスクロール |
| end | 要素が右端に来る様にスクロール |
| nearest | 既定値。startかend、どちらか近い方にスクロール |
一部ブラウザではオプションが効かないのでpolyfillを読ませると良さげです
Can I use を見ると、2021年2月時点ではIE、safari等が一部のオプションが効かない様です。
https://caniuse.com/?search=scrollIntoView
smooth scroll behavior polyfill というpolyfillが公開されているので、
読み込むことで下記のブラウザにも対応できます。
- Safari 6+
- Internet Explorer 9+
- Microsoft Edge 12+
- Opera Next
参考サイト
Element.scrollIntoView() – Web API | MDN
今どきのスムーズスクロール(2019年版) – to-R Media
