全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
フッター手前で止まるスムーズスクロール
2019.01.29
※この記事は2019年01月29日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
以前、『ページトップボタンが色々な出現をするスムーズスクロール』をご紹介しました。
続編となりますが、今回は、
『フッター手前で止まるスムーズスクロール』をご紹介します。
- 1. フッター手前で止まるスムーズスクロール【デモ】
- 2. 解説
フッター手前で止まるスムーズスクロール【デモ】
解説
【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”
});
}
この場合、
ページトップボタンがフッターの位置に到着後、絶対値でページトップボタンを固定。
他の条件の時は、ページトップボタンをスクロールに合わせて固定する。
①②③ を個別使用でも、それぞれの動きをします。
必要に応じて記述してみてください。
まとめ
こういった「フッター手前で止めてください」のオーダー、多々あります。
迷ったら、コピーしてご活用ください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 コーディング時にtableで表を組み込む際、レスポンシブコーディングなどでのスマートフ…
