背景
Chrome 61、Firefox 36 以降で、CSS のscroll-behavior: smooth
というプロパティを使用するだけで、スムーズスクロールが実現できるようになった。JavaScript を使わずにスムーズなスクロールを実現できる。しかし、スムーズスクロールが効かない場合があった。
scroll-behavior: smooth
とは
CSS でスムーズスクロールを有効化するために、scroll-behavior
プロパティを使用する。以下のように指定できる。
body {
scroll-behavior: smooth;
}
上記のプロパティを指定した場合、JavaScript を使用せずにアンカーリンクを使うだけで、スムーズなスクロールが実現できる。
<a href="#scroll-position">scroll-position</a>
<h2 id="scroll-position">scroll-position</h2>
スムーズスクロールが動作しない場合
スムーズスクロールが動作しない場合、以下のような理由が考えられる。
CSS を確認する
body
に以下のような指定のいずれかがされている場合、スムーズスクロールが動作しない。
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;