scrollIntoViewでスムーズスクロールが効かない原因
JavaScriptのelement.scrollIntoView({ behavior: 'smooth' })は対象の要素まで滑らかにスクロールさせる便利なAPIです。
以下のように対象の要素を指定するだけで、スムーズスクロールで移動できます。
HTML
<button id="topLink">ページの最後のボタンに遷移</button>
<!-- ボタンは離れている -->
<button id="bottomLink">ページの最初のボタンに遷移</button>JavaScript
const topLink = document.getElementById('topLink')
const bottomLink = document.getElementById('bottomLink')
topLink.addEventListener('click', () => {
bottomLink.scrollIntoView({ behavior: 'smooth' })
})
bottomLink.addEventListener('click', () => {
topLink.scrollIntoView({ behavior: 'smooth' })
})Windowsのアニメーション効果がオフだと無効になる
JavaScriptのelement.scrollIntoView({ behavior: 'smooth' })はWindowsのアニメーション効果がオフの状態だとスムーズスクロールが無効になります。
WindowsだとMacと違って余計なアニメーション効果があると動作が重くなるので、アニメーション効果をオフにしている方がMacユーザーより多いです。
Macにもアクセシビリティに「視差効果を減らす」という設定がありますが、こちらを有効にしてもスムーズスクロールは無効になりません。
以前はChromeやEdgeではスムーズスクロールを設定変更でも無効にできたのですが、現在は変更不可になっています。
chrome://flags/#smooth-scrolling
scroll-behaviorやscrollToも無効になる
Windowsのアニメーション効果をオフにすると、CSSの「scroll-behavior: scroll」やJavaScriptのscrollToの「behavior: 'smooth'」のスムーズスクロールも無効になります。
こちらも無効になっていることに気づかないケースがあるので覚えておくと良いでしょう。
CSS
html {
scroll-behavior: smooth;
}JavaScript
window.scrollTo({
top: 500,
behavior: 'smooth'
})結論
もし、あなたがWindowsを使用していて、スムーズスクロールにならない場合は、Windowsのアニメーション効果がオフになっています。
有効にしたい場合はオンに変更してください。
