円形 トップへ戻るボタン
これは、ページを一定量スクロールすると画面右下にふわっと現れる円形の「トップへ戻る」ボタンです。 window.scrollY が 120px を超えたかどうかを scroll イベントで監視し、 is-on クラスを付け外しすることで表示・非表示を切り替えます。
解説
これは、ページを一定量スクロールすると画面右下にふわっと現れる円形の「トップへ戻る」ボタンです。window.scrollY が 120px を超えたかどうかを scroll イベントで監視し、is-on クラスを付け外しすることで表示・非表示を切り替えます。クリック時は window.scrollTo に behavior:'smooth' を指定し、なめらかに最上部まで戻ります。普段は opacity:0 と pointer-events:none で完全に隠れているため、不要なときは操作の邪魔になりません。
こんな場面で活躍します
- 縦に長いブログ記事やコラムの読了後の離脱を防ぎたいとき
- 商品一覧や FAQ など、下までスクロールしがちなページ
- スマホで片手操作のユーザーに上部メニューへの近道を用意したいとき
出現タイミングは scrollY>120 の数値を変えるだけで調整できます。色は background、表示位置は right と bottom の値で簡単に変更可能です。aria-label を付けているのでスクリーンリーダーでも用途が伝わります。動きを抑えたい利用者向けに prefers-reduced-motion でスムーススクロールを無効化する配慮もしておくとより親切です。
使用例・適したシーン
- 長文記事ページ
- ワンページ LP
- ドキュメントサイト
よくある質問
ボタンが出てくるスクロール量を変えられますか？
はい。JavaScript で「スクロール量が 120 を超えたら表示する」と判定しているので、その 120 という数値を書き換えるだけで調整できます。数値を大きくすると、より下までスクロールしないと表示されなくなります。
JavaScript は必須ですか？
はい。スクロール位置の監視と表示の切り替え、スムーススクロールでの移動に JavaScript を使っています。リンクの a要素で代用すれば CSS だけでも作れますが、出現アニメーションには JavaScript が必要です。