概要
ページ最下部までスクロールした時にページトップ(トップへ戻る)ボタンをフッターの手前(フッター上)で止める処理について。用途・要件
- 画面をスクロールすると途中でPageTop(ページの先頭へ戻る)ボタンを表示させる。
- 画面のスクロールを進めて最下部付近になった時、PageTopボタンをフッターの手前で止める(スクロールはそのまま進む)。
- PC/SPでPageTopとフッター間の余白を変更。(window.matchMediaを使用)
- スクロールイベント使用。
- 「Intersection Observer API」を使用した方法はこちら。
注意事項
- ページトップのスムーススクロール処理は記載しておりません。
検証ブラウザ
- Google Chrome(最新)
- Microsoft Edge(最新)
- Firefox(最新)
- Safari(最新)
その他
- jQuery v3.6.4使用。
実装方法
ローカル環境にコードを移設した際に動作しない場合はこちら。(トラブルシューティングページへ)