200px以上スクロールすると右下に出てきます。押すとなめらかに先頭へ戻ります。出る位置は window.scrollY > 200 の数字で変えられます。
PAGE TOP
「トップへ戻る」ボタンのCSS素材
長いページの右下に置く「ページの先頭へ戻る」ボタンです。見本の中をスクロールすると、ボタンが出てくる様子を確かめられます。表示の切り替えに短いJavaScriptを使うものと、CSSだけで動くものがあります。
7種類
ボタンのまわりの線が、ページをどこまで読んだかに合わせて伸びていきます。
文字の入った横長のボタンが、画面の下からせり上がります。スマホで押しやすい大きさです。
スクロールに合わせて出てくる動きを、CSSの animation-timeline: scroll() だけで作っています。この仕組みに対応していないブラウザでは、最初からボタンが表示されたままになります（押せば戻れます）。html の scroll-behavior でなめらかに戻ります。