CSSでトップに戻るボタンを作る | WEB制作の備忘録めもミフネWEB

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

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

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

INDEX

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

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

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

これでいいでしょう。

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

次に、htmlに「scroll-behavior：smooth；」で、スクロールの動きを滑らかにします。

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

html{
 scroll-behavior:smooth;
}

これだけです。

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

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

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

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

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

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

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

そこに

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

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

:targetセレクタは、

#hide{
  display: none;
}

#hide:target{
  display: block;
}

のような形で使うと、簡易式のモーダルウィンドウや簡単なライトボックスも作れます。JSでやればいいのですが、知っておいても損はないと思います。