【jQuery】FixedされたPageTopボタンをスクロール中にフッターの手前で止める処理

[ ID : 2433 ]
シルバー
【jQuery】FixedされたPageTopボタンをスクロール中にフッターの手前で止める処理
実装目安
3分

概要

ページ最下部までスクロールした時にページトップ(トップへ戻る)ボタンをフッターの手前(フッター上)で止める処理について。

用途・要件

  • 画面をスクロールすると途中でPageTop(ページの先頭へ戻る)ボタンを表示させる。
  • 画面のスクロールを進めて最下部付近になった時、PageTopボタンをフッターの手前で止める(スクロールはそのまま進む)。
  • PC/SPでPageTopとフッター間の余白を変更。(window.matchMediaを使用)
  • スクロールイベント使用。
  • 「Intersection Observer API」を使用した方法はこちら

注意事項

  • ページトップのスムーススクロール処理は記載しておりません。

検証ブラウザ

  • Google Chrome(最新)
  • Microsoft Edge(最新)
  • Firefox(最新)
  • Safari(最新)

その他

  • jQuery v3.6.4使用。

実装方法

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

関連記事

全ての記事を見る

KONOCODEのメリット 無料会員登録