CSS だけでスムーズスクロールが実現できるというscroll-behavior: smooth;
が Firefox 36 で正式サポートされたので色々と動作を確認していた。色々と試してみるとスムーズスクロールが効かないパターンがあったので確認すべきところをメモしておく。
実装方法
scroll-behavior
は以下のように指定する。(auto
が初期値)
body {
scroll-behavior: smooth;
}
上記のscroll-behavior を指定した上で、従来通りアンカーを書くだけでJavaScriptなどを使わずスムーズスクロールすることができる。
<a href="#scroll-position">scroll-position</a>
<h2>scroll-position</h2>
スムーズスクロールが動作しない場合
CSSを確認する
body
に以下のような指定のいずれかがされている場合、スムーズスクロールが動作しない。
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;