どう作成するか：スムーズなスクロール

CSSを使ってスムーズなスクロール効果を作成する方法を学びます。

滑らかなスクロール

Section 1
クリックして、下の第2部分に滑らかにスクロールします。

リンクをクリックすると、滑らかなスクロール効果が見られます。

注意：scroll-behavior属性を削除すると、滑らかなスクロールを解除できます。

滑らかなスクロール

を<html>要素に追加します scroll-behavior: smooth 全ページの滑らかなスクロールを有効にすることができます：

注意：特定の要素/スクロールコンテナに追加することもできます。

例

html {
  scroll-behavior: smooth;
}

自分で試してみてください

ブラウザのサポート

表の数字は、スクロール行動属性を完全にサポートする最初のブラウザバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
61.0 79.0 36.0 14.0 48.0

クロスブラウザソリューション

をサポートしていない scroll-behavior を使用するブラウザでは、JavaScriptやJavaScriptライブラリ（例えば jQuery）を使用して、すべてのブラウザに対応するソリューションを作成します：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
  // すべてのリンクに滑らかなスクロールを追加します
  $("a").on('click', function(event) {
    // デフォルトの行動を覆す前に、this.hashが値を持っていることを確認します
    if (this.hash !== "") {
      // デフォルトのアンカークリック行動を防ぎます
      event.preventDefault();
      // ハッシュ値を保存します
      var hash = this.hash;
      // jQueryのanimate()メソッドを使用して滑らかなページスクロールを追加します
      // オプションの数字（800）は、指定されたエリアにスクロールするために必要なミリ秒数を指定します
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // スクロールが完了した後、URLにハッシュ(#)を追加します（デフォルトのクリック行動）
        window.location.hash = hash;
      );
    } // End if
  );
);
</script>

自分で試してみてください

関連ページ

リファレンスマニュアル：CSS scroll-behavior属性