スムーズスクロールの実装

ページ内リンクをスムーズにスクロールさせるテクニックです。

基本実装

html {
  scroll-behavior: smooth;
}

これだけで、#id へのリンククリック時にスムーズスクロールが有効になります。

モーション軽減を好むユーザーへの配慮も重要です。

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

固定ヘッダーがある場合は、スクロール先の余白を調整します。

:target {
  scroll-margin-top: 80px; /* ヘッダーの高さ分 */
}

/* または全見出しに適用 */
h2, h3, h4 {
  scroll-margin-top: 80px;
}

ユーザー体験とアクセシビリティを両立させましょう。