トップへ戻るボタン
少し下までスクロールすると画面右下にそっと現れ、押すとページ最上部へ戻る定番のボタンです。 scroll イベントで縦位置を監視し、 scrollY が一定（サンプルでは120px）を超えたら show クラスを付けて opacity でふわっと表示します。
解説
少し下までスクロールすると画面右下にそっと現れ、押すとページ最上部へ戻る定番のボタンです。scrollイベントで縦位置を監視し、scrollYが一定（サンプルでは120px）を超えたらshowクラスを付けてopacityでふわっと表示します。クリック時はscrollToにbehavior:"smooth"を渡し、なめらかに上へ戻します。監視はpassive:true付きなのでスクロール性能を妨げません。
使いどころ
- 記事や規約など縦に長いページの読み終わり対策
- 商品一覧やFAQなど下までスクロールしがちな画面
- スマホで上部メニューへ素早く戻りたいサイト全般
出現の高さはscrollY>120の数値で調整でき、早く出したいなら小さく、もっと下で出したいなら大きくします。固定表示はposition:fixedとright／bottomで位置を決めているので、フッターやチャットボタンと重ならないよう余白を取ってください。aria-labelを付けてあるので、アイコンだけでも読み上げで用途が伝わります。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
ボタンが出てくるタイミングを変えられますか。
JS内の scrollY が 120 を超えたら表示する条件の 120 を変えます。小さくすると少しのスクロールで早く出現し、大きくするとより下までスクロールしてから現れます。
戻るときのスムーズな動きを止めたいです。
クリック時の scrollTo に渡している behavior の smooth を auto に変えると、アニメーションなしで一瞬で最上部へジャンプします。