【jQuery】フッター手前でページトップボタンを止める
やりたいこと
- フッターにページトップボタンがかぶらないように手前で止める
フッターの手前でページトップのボタンが止まる仕組みをjsで実装します。
手順
サンプルは右のコンテンツエリアをスクロールするとご覧いただけます。
以下のコードをコピペすれば実装できます◎
See the Pen
OJbowWJ by nanami (@nanami_po)
on CodePen.
jsの前半にクリックするとトップにふわっと戻る仕組みの記述があり、
$(function () {
const topBtn = $("#page_top");
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$("body,html").animate(
{
scrollTop: 0,
},
500
);
return false;
});
});
後半が今回実装する、フッター手前で止まる仕組みの記述です。
$(document).ready(function () {
$(window).on("scroll", function () {
scrollHeight = $(document).height();
scrollPosition = $(window).height() + $(window).scrollTop();
footHeight = $("footer").innerHeight();
if (scrollHeight - scrollPosition <= footHeight) {
$("#page_top").css({
position: "absolute",
bottom: footHeight + 0,
});
} else {
$("#page_top").css({
position: "fixed",
bottom: "0",
});
}
});
});
クリックするとトップにふわっと戻る仕組みについてはこちらの記事に詳しく書いていますので参照してください。
bottom: footHeight + 0
ここがフッターの何px手前でボタンを止めるか、を調節する部分です。サンプルでは 0 になっているので、フッターの直前ピッタリで止まります。
bottom: "0"
これはボタンが表示されたときの位置になります。サンプルでは 0 になっているので、ページの一番下(bottm:0;)に出現しています。
上記の２箇所の数値を調整することで、任意の位置でボタンを止めたり出現させたりできます。
実装は以上で完了です◎お疲れ様でした！
関連記事
