CSS

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

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

簡単にページ内アンカーをスムーズに移動する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>

CSS(scroll-behavior:smooth)だけでページ内アンカーをスムーズに移動するデモページ

CSS(scroll-behavior:smooth)だけでページ内アンカーをスムーズに移動するデモ

 
※イージング等の細かい速度調整は出来ないです。
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。