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

CSSだけで実現するスムーススクロールの書き方

CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。

scroll-behaviorプロパティの主な値

  • auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。
  • smooth:滑らかなアニメーションを伴ってスクロールします。

このプロパティはChrome、Firefox、Edge、Safariなどの主要ブラウザでサポートされており、モダンなWebサイトで広く利用できます。

サンプル1:smoothでなめらかなスクロール

次の例では、スクロール可能なコンテナにscroll-behavior: smooth;を指定しています。「Last」または「First」のリンクをクリックすると、対象セクションまでスムーススクロールします。

<!DOCTYPE html>
<html>
<head>
<style>
html {
   line-height: 200px;
   margin: 30px;
   text-align: center;
   vertical-align: middle;
}
#parent {
   scroll-behavior: smooth;
   width: 250px;
   height: 200px;
   overflow-y: scroll
}
.pink {
   height: 200px;
   box-shadow: inset 0 0 50px deeppink;
}
.blue {
   height: 200px;
   box-shadow: inset 0 0 50px darkblue;
}
</style>
</head>
<body>
<div id="parent">
<div class="blue" id="first"><a href=#last>Last</a></div>
<div class="pink"></div>
<div class="blue"></div>
<div class="pink" id="last"><a href=#first>First</a></div>
</div>
</body>
</html>

表示結果

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

CSSだけで実現するスムーススクロールの書き方

リンクをクリックすると、瞬時に移動するのではなく、ゆっくりと滑らかにスクロールしながら目的地まで移動する様子が確認できます。

サンプル2:autoを指定した場合の比較

次の例ではscroll-behavior: auto;を指定しています。円形の枠を持つコンテナ内で、リンクをクリックするとアニメーションなしで即座に目的の位置へジャンプします。smoothとの違いを比べてみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
html {
   line-height: 150px;
   margin: 30px;
   text-align: center;
   vertical-align: middle;
}
#parent {
   scroll-behavior: auto;
   width: 150px;
   height: 150px;
   overflow: hidden;
   border: 22px groove tomato;
   border-radius: 50%;
}
.green {
   height: 150px;
   box-shadow: inset 0 0 50px darkgreen;
}
.blue {
   height: 150px;
   box-shadow: inset 0 0 50px darkblue;
}
</style>
</head>
<body>
<div id="parent">
<div class="blue" id="first"><a href=#last>Last</a></div>
<div class="green"></div>
<div class="blue"></div>
<div class="green" id="last"><a href=#first>First</a></div>
</div>
</body>
</html>

表示結果

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

CSSだけで実現するスムーススクロールの書き方

この場合、リンクをクリックしてもスクロールアニメーションは発生せず、即時に該当箇所へ切り替わります。ユーザー体験を重視するサイトではsmoothを指定するのがおすすめですが、ページの構造によっては即時移動の方が使いやすいゲースもあります。

  1. CSSだけでメニューアイコン（ハンバーガーメニュー）を作成する方法

    CSSだけを使えば、画像ファイルに頼らずに、スマートフォンサイトなどでよく見かける「メニューアイコン」（三本線のハンバーガーアイコン）を簡単に作成できます。仕組みはとてもシンプルで、横長の長方形（バー）を3つ縦に並べるだけです。 実装例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> div {   width:

  2. 【CSS】Flexboxで作る高度なレイアウト！基本プロパティと実装サンプルを解説

    Flexbox（フレックスボックス）とは？ CSS3には「Flexible Box Layout（フレキシブルボックスレイアウト）」と呼ばれるレイアウトモードが用意されており、一般的にはFlexbox（フレックスボックス）として知られています。Flexboxを活用することで、従来のfloatやpositionを使った手法よりもはるかに簡単かつ柔軟に、複雑なWebアプリケーションやWebページのレイアウトを構築できます。 Flexboxは「フレックスコンテナ」（親要素）と「フレックスアイテム」（子要素）という2つの概念で構成されます。親要素にdisplay: flex;を指定するだけで、その直下