2021.3.7
javascript

【js】フッター手前でページトップボタンを止める

  • WEB
  • テクニック
【js】フッター手前でページトップボタンを止める

やりたいこと

  • フッターにページトップボタンがかぶらないように手前で止める

フッターの手前でページトップのボタンが止まる仕組みを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",
});
}
});
});

 

クリックするとトップにふわっと戻る仕組みについてはこちらの記事に詳しく書いていますので参照してください。

【js】トップにふわっと戻るページトップボタンの実装

 


bottom: footHeight + 0

ここがフッターの何px手前でボタンを止めるか、を調節する部分です。サンプルでは 0 になっているので、フッターの直前ピッタリで止まります。

 

bottom: "0"

これはボタンが表示されたときの位置になります。サンプルでは 0 になっているので、ページの一番下(bottm:0;)に出現しています。

 

上記の2箇所の数値を調整することで、任意の位置でボタンを止めたり出現させたりできます。

 

実装は以上で完了です◎お疲れ様でした!

Share Please

Read this too