今回はCSSだけで簡単にページ内アンカーをスムーズに移動する方法をご紹介します。
過去にJavaScriptやjQueryを使った「「ページTOPへ戻る」ボタン(アンカーリンク)クリックでページ内をスムーズ移動する方法」や「jquery.page-scroller:ページ内アンカーをスムーズにスクロールするjs【簡単設置】」を紹介しましたが、JavaScriptを使わずCSSだけで簡単に出来るので良いですね。
Contents
簡単にページ内アンカーをスムーズに移動する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アナリティクスタグは流用しないで下さい。
ディスプレイ広告