Web blog WEBブログ

フッター手前で止まるスムーズスクロール

2019.01.29

こんにちは。コーダーの兼山です。

以前、『ページトップボタンが色々な出現をするスムーズスクロール』をご紹介しました。

続編となりますが、今回は、
『フッター手前で止まるスムーズスクロール』をご紹介します。

フッター手前で止まるスムーズスクロール【デモ】

解説

【css】
親要素に『 position:relative;』を記述しないと、正常に動きません。
デモを例にすると、
.wrapper {
position:relative;
}
この記述です。

【html】
実装する処理の記述よりも前にjQueryの記述をします。

【javascript】
① 下部へのスクロールでページトップボタンをふんわり表示させる記述
if ($(this).scrollTop() > 100) {
$(“#topBtn”).fadeIn(“fast”);
} else {
$(“#topBtn”).fadeOut(“fast”);
}

② ページトップボタンをクリックでページ上部へスムーズにスクロールさせる記述
$(‘#topBtn’).click(function () {
$(‘body,html’).animate({
scrollTop: 0
}, 400);
return false;
});

③ ページトップボタンをフッターで止める記述
scrollHeight = $(document).height();
scrollPosition = $(window).height() + $(window).scrollTop();
footHeight = $(“footer”).innerHeight();
if ( scrollHeight – scrollPosition <= footHeight ) {
$(“#topBtn”).css({
“position”:”absolute”,
“bottom”: footHeight + 20
});
} else {
$(“#topBtn”).css({
“position”:”fixed”,
“bottom”: “20px”
});
}

この場合、
ページトップボタンがフッターの位置に到着後、絶対値でページトップボタンを固定。
他の条件の時は、ページトップボタンをスクロールに合わせて固定する。

①②③ を個別使用でも、それぞれの動きをします。
必要に応じて記述してみてください。

まとめ

こういった「フッター手前で止めてください」のオーダー、多々あります。
迷ったら、コピーしてご活用ください。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口