iPentec.com / Doc / CSS / ページ内リンク

ページ内リンクでスムーズにスクロールする - scroll-behavior プロパティを利用したスムーズクロール - CSS

ページ内リンクでスムーズにスクロールするコードを紹介します。

概要

こちらの記事ではJavaScriptでページ内のリンクでスムーズにスクロールするコードを紹介しました。
新しいバージョンのWebブラウザ(Chromeでは2017年以降)ではJavaScriptを利用せずに、CSSのscroll-behaviorプロパティの設定で実現できるようになりました。この記事では、scroll-behaviorプロパティの設定でページ内のリンクでスムーズにスクロールするコードを紹介します。

書式

html {
  scroll-behavior: smooth;
}

または、

:root {
  scroll-behavior: smooth;
}

htmlタグのクラス、またはroot擬似クラスとして設定する必要があります。

実装例

コード

以下のHTML、CSSファイルを作成します。

AnchorLinkDemo.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
  <link rel="stylesheet" href="AnchorLinkDemo.css" />
    <title></title>
</head>
<body>
  <a id="link1" href="#section1">セクション1へ</a><br />
  <a id="link2" href="#section2">セクション2へ</a><br />
  <a id="link3" href="#section3">セクション3へ</a><br />
  <a id="link4" href="#section4">セクション4へ</a><br />
  <a id="link5" href="#section5">セクション5へ</a><br />
  <hr />

  <a id="section1">セクション1</a>
  <div id="content1">コンテンツ1</div>

  <a id="section2">セクション2</a>
  <div id="content2">コンテンツ2</div>

  <a id="section3">セクション3</a>
  <div id="content3">コンテンツ3</div>

  <a id="section4">セクション4</a>
  <div id="content4">コンテンツ4</div>

  <a id="section5">セクション5</a>
  <div id="content5">コンテンツ5</div>


  <a id="link4" href="#section1">セクション1へ</a><br />
  <a id="link5" href="#section2">セクション2へ</a><br />
  <a id="link6" href="#section3">セクション3へ</a><br />
  <hr />
</body>
</html>

AnchorLinkDemo.css

html {
  scroll-behavior: smooth;
}

#content1 {
  background-color:#fff6c5;
  height:480px;
}
#content2 {
  background-color: #ffe7e7;
  height: 360px;
}
#content3 {
  background-color: #cefff5;
  height: 480px;
}
#content4 {
  background-color: #e9e8ff;
  height: 360px;
}
#content5 {
  background-color: #ffdcee;
  height: 280px;
}

解説

以下の scroll-behavior: smooth; の設定により、ページ内のリンクでの移動時のスクロールがスムーズスクロールになります。

html {
  scroll-behavior: smooth;
}

ページ内のリンクは従来のアンカーリンクの記述のままで動作します。アンカーリンクの書式や動作についてはこちらの記事を参照してください。

  <a id="link1" href="#section1">セクション1へ</a><br />
  <a id="link2" href="#section2">セクション2へ</a><br />
  <a id="link3" href="#section3">セクション3へ</a><br />
  <a id="link4" href="#section4">セクション4へ</a><br />
  <a id="link5" href="#section5">セクション5へ</a><br />

注意

scroll-behaviorをbodyタグへ設定しても動作しません。htmlタグまたは、:rootに対してscroll-behaviorを設定する必要があります。

動作しない記述