特定の要素を過ぎたら表示されるボタン
特定の要素までスクロールしたら、ページ下部に固定されたボタンが表示される実装方法をまとめました。
スマホでもパソコンでも使えるように、画面トップからの距離ではなく、表示させたい要素に到達した時に表示されるようにしました。
初めからページ下部に、ボタンやバナーがあるのは邪魔なので、一定の要素まできたら表示させたい時などに便利です。
デモページはこちら
HTML
class=”btn-show”のコンテンツに到達したら、固定ボタンが表示されます。
class=”btn-show”のコンテンツよりスクロールが上にきたら非表示になります。
<div class="wrapper">
<div class="contents">
<div class="box">
<p>コンテンツ</p>
</div>
<div class="box">
<p>コンテンツ</p>
</div>
<div class="box">
<p>コンテンツ</p>
</div>
<div class="box">
<p>コンテンツ</p>
</div>
<div class="box">
<p>コンテンツ</p>
</div>
<div class="box btn-show">
<p>ボタンが表示されるコンテンツ</p>
</div>
<div class="box">
<p>コンテンツ</p>
</div>
<div class="box">
<p>コンテンツ</p>
</div>
<div class="box">
<p>コンテンツ</p>
</div>
<div class="box">
<p>コンテンツ</p>
</div>
</div>
<div class="fixed-btn__area">
<p class="fixed-btn__box"><a href="#" target="_blank" class="fixed-btn__link">固定ボタン</a></p>
</div>
</div>
jquery
$(function(){
// ページ下部固定ボタン表示非表示
$(window).on('load resize',function(){
btnOffset = $('.box.btn-show').offset().top;
winH = $(window).height();
});
$(function() {
var fixedbtn = $('.fixed-btn__area');
fixedbtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > btnOffset - winH) {
fixedbtn.fadeIn();
} else {
fixedbtn.fadeOut();
}
});
});
});
on()メソッドで読み込み時とリサイズ時のイベントを取得します。
“resize“と記述することで、画面が読み込まれた時だけでなく、画面がリサイズされた時に画面縦幅の距離の取得を行うようにしています。
$(window).on(‘load resize’,function(){
//ここに読み込み時とリサイズ時の実行したい処理を記述する
});
スクロールした距離と画面のトップから指定要素（class=”btn-show”）までの位置をjQueryで取得し、 「スクロールした距離 > 指定要素までの位置」 となった時にボタンが表示されるようにしました。
btnOffset = $(‘.box.btn-show’).offset().top; で画面トップから指定要素までの位置を取得します。
offset()は、対象となるHTML要素の左上を原点としたX・Y座標を取得することができます！
winH = $(window).height(); で、ブラウザの高さを取得します。
$(window).scrollTop(); で実際にブラウザをスクロールした距離が取得できます。
ブラウザのスクロール距離 > 指定要素までの位置 – ブラウザの縦サイズ
上記の時にページ下部固定ボタンを表示（fadeIn()）して、それ以外の時には非表示（fadeOut()）させます。
ボタン以外に、ページトップリンクやバナーなどいろいろ使えそうですね！！
おすすめのjQuery参考書はこちら！
