スムーズスクロール（scroll-behavior）

2023.06.07

ページ内リンクによってWebページ内の特定の箇所に移動する際、スルスルとスムーズにスクロールして移動するような実装は、旧来においてJavaScriptの出番だった。しかし、現在では以下のようにscroll-behaviorプロパティの指定を1行書くだけで実現可能である。
また、「scroll-behavior-polyfill」というパッケージが配布されており、設定すると古いバージョンのブラウザに対応できる。
ブラウザ対応状況 – Can I Use

html {
  scroll-behavior: smooth;
}
<!-- CDNのコード -->
<script src="https://cdn.jsdelivr.net/npm/scroll-behavior-polyfill@2.0.13/dist/index.min.js"></script>

scroll-behaviorの注意点

  • すべてのページ内リンクがスムーススクロールになる
  • 移動速度の設定ができない
  • URLにアンカーリンクがつく：JavaScriptでURLの状態を取得するような機能がある場合、影響が出てしまう可能性がある
inserted by FC2 system