
今回はスムーススクロール(よく画面右下に登場するトップに戻るボタン。クリックすると、するするするっと上に戻っていくあれ)をCSSだけで実装してみたいと思います。
基本的にJavaScriptで実装した方が、スピード調節ができたり初期画面では非表示・画面スクロールすると表示 とかできるので良いのですが、今回は簡易的にcssでできる範囲でやりたいと思います。
使う知識は少しだけです。
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で閲覧した場合は普通のページ内リンクになります。
:target セレクタを利用する
ページ内リンクのよくある悩みとして、「表示位置がずれる」というものがあります。
たとえば、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でやればいいのですが、知っておいても損はないと思います。