scrollIntoViewのスムーズスクロールは設定により効かないことがある

scrollIntoViewでスムーズスクロールが効かない原因

JavaScriptのelement.scrollIntoView({ behavior: 'smooth' })は対象の要素まで滑らかにスクロールさせる便利なAPIです。

以下のように対象の要素を指定するだけで、スムーズスクロールで移動できます。

<button id="topLink">ページの最後のボタンに遷移</button>

<!-- ボタンは離れている -->

<button id="bottomLink">ページの最初のボタンに遷移</button>

<button id="topLink">ページの最後のボタンに遷移</button>

<!-- ボタンは離れている -->

<button id="bottomLink">ページの最初のボタンに遷移</button>

const topLink = document.getElementById('topLink')
const bottomLink = document.getElementById('bottomLink')

topLink.addEventListener('click', () => {
  bottomLink.scrollIntoView({ behavior: 'smooth' })
})

bottomLink.addEventListener('click', () => {
  topLink.scrollIntoView({ behavior: 'smooth' })
})

const topLink = document.getElementById('topLink')
const bottomLink = document.getElementById('bottomLink')

topLink.addEventListener('click', () => {
  bottomLink.scrollIntoView({ behavior: 'smooth' })
})

bottomLink.addEventListener('click', () => {
  topLink.scrollIntoView({ behavior: 'smooth' })
})

scrollIntoViewのスムーズスクロールのサンプル

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'」のスムーズスクロールも無効になります。

こちらも無効になっていることに気づかないケースがあるので覚えておくと良いでしょう。

html {
  scroll-behavior: smooth;
}

html {
  scroll-behavior: smooth;
}

window.scrollTo({
  top: 500,
  behavior: 'smooth'
})

window.scrollTo({
  top: 500,
  behavior: 'smooth'
})

結論

もし、あなたがWindowsを使用していて、スムーズスクロールにならない場合は、Windowsのアニメーション効果がオフになっています。

有効にしたい場合はオンに変更してください。

関連した記事

scroll-behavior: smooth;は検索もスムーススクロールになる JavaScriptのscrollIntoViewでスムーススクロールを簡単実装 scroll-behavior: smooth;のスムーススクロールは便利だが使わないほうが良い scroll-stateによりCSSのみでトップに戻るボタンの表示・非表示が実装可能になった