CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでスムーズなスクロール効果を実現する方法【scroll-behavior活用】

CSSだけでスムーズなスクロール（スムーススクロール）を実現したい場合、scroll-behaviorプロパティを使用します。このプロパティにsmoothを指定すると、ページ内リンクをクリックした際に、瞬時にジャンプするのではなく、滑らかにアニメーションしながら目的のセクションへ移動できるようになります。

実装方法

基本的には、html要素に対して以下の1行を追加するだけです。

html {
  scroll-behavior: smooth;
}

サンプルコード

実際に動作する完全なコード例は以下の通りです。

<!DOCTYPE html>
<html>
<head>
<style>
  html {
    scroll-behavior: smooth;
  }
  * {
    box-sizing: border-box;
  }
  body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
  }
  #firstSection {
    height: 100vh;
    background-color: rgb(119, 77, 219);
    color: white;
    padding: 20px;
  }
  #secondSection {
    height: 100vh;
    color: white;
    background-color: rgb(42, 128, 168);
    padding: 20px;
  }
  a {
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    color: yellow;
  }
</style>
</head>
<body>
<h1>スムーススクロールの例</h1>
<div id="firstSection">
<h2>セクション1</h2>
<p>リンクをクリックすると、スムーズなスクロール効果を確認できます。</p>
<a href="#secondSection">クリックして下のセクション2へスムーズに移動</a>
</div>
<div id="secondSection">
<h2>セクション2</h2>
<a href="#firstSection">クリックして上のセクション1へスムーズに戻る</a>
</div>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

CSSでスムーズなスクロール効果を実現する方法【scroll-behavior活用】

「セクション2へ移動」のリンクをクリックすると、画面が瞬時に切り替わるのではなく、滑らかなアニメーションとともにセクション2までスクロールします。

CSSでスムーズなスクロール効果を実現する方法【scroll-behavior活用】

ポイント解説

  • scroll-behavior: smooth; … アンカーリンクによる移動を滑らかなスクロールに変更します。
  • height: 100vh; … 各セクションを画面いっぱいの高さに設定し、スクロール効果が分かりやすくなります。
  • 対応ブラウザ … 主要なモダンブラウザ（Chrome、Firefox、Edge、Safariなど）でサポートされています。

JavaScriptを使わずにCSSのみで実装できるため、ランディングページやシングルページサイトのナビゲーション改善にぜひ活用してください。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. CSSだけで実現する視差スクロール（パララックス）効果の作り方

    Webサイトに動きと奥行きを与える演出のひとつに「視差スクロール（パララックススクロール）」があります。背景画像と前景コンテンツのスクロール速度に差をつけることで、画面に立体感が生まれ、ユーザーを引き込む印象的なデザインになります。実は、JavaScriptを使わなくても、CSSのbackground-attachment: fixedを活用するだけで、簡単にパララックス効果を実現できます。このプロパティを指定すると、ページをスクロールしても背景画像が固定されたまま表示され、その上を前景のコンテンツが流れるように動くため、視差が生まれる仕組みです。パララックス効果の基本ポイントbackgrou