CSSでトップに戻るボタンを作る

今回はスムーススクロール(よく画面右下に登場するトップに戻るボタン。クリックすると、するするするっと上に戻っていくあれ)をCSSだけで実装してみたいと思います。

基本的にJavaScriptで実装した方が、スピード調節ができたり初期画面では非表示・画面スクロールすると表示 とかできるので良いのですが、今回は簡易的にcssでできる範囲でやりたいと思います。

使う知識は少しだけです。

scroll-behaviorで画面スクロールをスムースにする

まずボタンの実装ですが、普通のページ内リンクです。
このサイトではヘッダーが#headerなので、

<a href="#header">ボタン</a>

これでいいでしょう。

あとはボタンを右下に置いておきます。position:fixedで常に表示させても良いですし、普通に最下部に置いておくのもありだと思います。

今回はfixedにします。

次にスクロールの動きを「scroll-behavior」プロパティを「smooth」でhtmlに指定します。これでするするするっと動きます。

scroll-behaviorの初期値はauto。autoかsmoothかの二択です。

html{
 scroll-behavior:smooth;
}

試しに最初のh2に戻るリンクを作りましたので、試してみたい方はどうぞ。

  • 誠に残念なことに、safariブラウザが対応していないプロパティです(あとIEも)。safariで閲覧した場合は普通のページ内リンクになります。

:target セレクタを利用する

ページ内リンクのよくある悩みとして、「表示位置がずれる」というものがあります。
たとえば、h2に飛ぶページ内リンクなのに、クリックするとh2の下に移動してしまうというやつ。

このページ内リンクのズレには色々な修正対応があるのですが、今一番楽なのは、:target セレクタを使う方法です。

:target は、:hover とか:checkedなどと同じ疑似セレクタで、リンククリックされたときのみ働くcssです。

当然、ページが遷移してしまう普通のリンクには使えないので、ページ内リンクでのみ使用できます。

たとえば下のような#linkへのページ内リンクがあったとします。

<p id="link">沈丁花が良い香りです</p>
#
#
<a href="#link">LINK</a>

そこに

#link:target{
  padding-top:2em;   /*値は任意*/
}

とでも指定しておくと、#linkに移動するページ内リンクがクリックされたときだけpadding-top:2em が発動し表示位置を調整してくれます。

:targetセレクタは、

#hide{
  display: none;
}
#hide:target{
  display: block;
}

のような形で使うと、簡易式のドロワーメニューや簡単なライトボックスも作れます。JSでやればいいのですが、知っておいても損はないと思います。

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2020年3月1日HTML/CSScss,scroll-behavior,セレクタ

Posted by ミフネWEB