CSSだけで簡単にページ内アンカーをスムーズに移動する方法【scroll-behavior:smooth】 DAD UNION

今回はCSSだけで簡単にページ内アンカーをスムーズに移動する方法をご紹介します。
過去にJavaScriptやjQueryを使った「「ページTOPへ戻る」ボタン（アンカーリンク）クリックでページ内をスムーズ移動する方法」や「jquery.page-scroller：ページ内アンカーをスムーズにスクロールするjs【簡単設置】」を紹介しましたが、JavaScriptを使わずCSSだけで簡単に出来るので良いですね。

Contents

簡単にページ内アンカーをスムーズに移動するCSSの記述
CSSだけで簡単にページ内アンカーをスムーズに移動するHTMLの記述
CSS（scroll-behavior:smooth）だけでページ内アンカーをスムーズに移動するデモページ

簡単にページ内アンカーをスムーズに移動するCSSの記述

※html要素に「scroll-behavior: smooth;」を記述するだけです。bodyタグに設定するとスムーズにならない様です。ページ内アンカー移動用エリア（.area、#a1、#a2、#a3）を用意しました。対応してるブラウザ種類とバージョンがあります。

<style>
html{
  scroll-behavior: smooth;
}
body{
  padding: 0;
  margin: 0;
  text-align:center;
}
a{
  font-size: 18px;
}
h1{
  line-height:1.6em;
  text-align:center;
  font-weight:bold;
  padding: 15px 0 30px 0;
  font-size: 18px;
}
.area{
  width: 100%;
  height: 1500px;
  font-size: 40px;
  font-weight: bold;
  line-height: 1500px;
}
#a1{
  background-color: #99CCFF;
}
#a2{
  background-color: #FFFFBF;
}
#a3{
  background-color: #CFFFBF;
}
</style>

CSSだけで簡単にページ内アンカーをスムーズに移動するHTMLの記述

※。ページ内アンカー移動用エリア（class=”area”、id=”a1″～id=”a3″）を用意しました。必要に応じて変更して下さい。

<h1>CSS（scroll-behavior:smooth）だけでページ内アンカーをスムーズに移動</h1>

<a href="#a1">AREA1に移動↓</a>　　<a href="#a2">AREA2に移動↓</a>　　<a href="#a3">AREA3に移動↓</a>
<br>
<br>
<br>

<div class="area" id="a1">AREA1</div>
<div class="area" id="a2">AREA2</div>
<div class="area" id="a3">AREA3</div>