HPとかLPはフォームまで長いから、邪魔にならないでいつでもページ下のフォームに飛べるボタンが欲しいなす…
それなら特定の範囲内でだけ追従して不要な部分では非表示になるボタンを実装しちゃおう！
こんにちは〜！なるなるです！
webサイトを閲覧していて「この商品欲しいけど、どこのボタンから変えるんだろ」と思うことはよくありますよね！
webデザイナーとしては、閲覧しているユーザーさんがが迷わずにCV(コンバージョン)ページに到達してもの。
今回はHPの資料請求や、LPで商品購入などで使えるスクロールしたら表示されて追従もしてくれる便利なjQueryについて解説を交えて実装方法をお伝えします！
もくじ
デモ
まずはデモを見てみましょう！
こういう追従は便利ですよね〜👏
See the Pen Untitled by naryutaro (@naryutaro) on CodePen.
jQueryの読み込み
まずはjQueryを読み込みましょう！
CDN
コピペするだけでOKです！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>ローカル
<script src="../assets/js/jquery.js"></script>上記のコードを<head>内、もしくは</body>直前に貼り付けてくださいね。
jQueryでスクロール追従ボタンを実装する
ここからが実際のコードの解説です！
先程のデモのようにスクロールを始めるとボタンが表示され、指定した範囲内でのみ表示されるコードになっています。
ステップ1：HTMLの実装
まずはボタン用のHTMLを追加しましょう！
下記のように、HTMLに固定表示するボタンの要素と表示範囲を追加します🙌
<div class="item"><p>MORE BUTTON</p></div>
<div class="content">
<p>スクロールしてください</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
</div>
<div id="fixed_on">
<p>表示エリア</p>
<p>表示エリア</p>
<p>表示エリア</p>
<p>表示エリア</p>
<p>表示エリア</p>
<p>表示エリア</p>
<p>表示エリア</p>
<p>表示エリア</p>
<p>表示エリア</p>
<p>表示エリア</p>
<p>表示エリア</p>
<p>表示エリア</p>
<p>表示エリア</p>
<p>表示エリア</p>
<p>表示エリア</p>
<p>表示エリア</p>
<p>表示エリア</p>
<p>表示エリア</p>
<p>表示エリア</p>
<p>表示エリア</p>
</div>
<div class="content">
<p>ここから消えます</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
<p>↓↓↓↓↓↓↓↓↓↓↓</p>
</div>ステップ2：CSSの実装
次に、ボタンがページの端に固定されるようにCSSを追加します！
右下に固定して見やすいように少しデザインを加えて実装しましょう🙌
transitionはつけておくとそれっぽく見えるのでつけましょう！
#fixed_on{
background:rgb(230,230,230);
width:100%;
padding:1rem;
}
.item {
position: fixed;
z-index: 99;
right: 0;
bottom: 20%;
transition: opacity 0.5s ease-in-out;
opacity: 0;
background: #000;
display:block;
padding:1rem 0;
}
.item p{
writing-mode: vertical-rl;
color: #fff;
font-size:14px;
letter-spacing: .1rem;
}
.item.fixed{
position: fixed;
opacity: 1;
}ステップ3：jQueryでスクロール範囲に応じた表示・非表示を設定
それでは改めてステップ3のjQueryコードをわかりやすく解説付きで書いていきます！
今回はスクロールに応じてボタンが特定の範囲内で表示され、範囲外にスクロールすると非表示になる動きの実装になります〜🙌
jQuery(document).ready(function(){
var offset = 200;
var fixed_on = jQuery('#fixed_on');
if (window.matchMedia('(max-width: 768px)').matches) {
offset = 300;
}
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
var topPosition = fixed_on.offset().top - offset;
var bottomPosition = topPosition + fixed_on.height();
if (scrollPos > topPosition && scrollPos < bottomPosition) {
jQuery('.item').addClass('fixed');
} else {
jQuery('.item').removeClass('fixed');
}
});
});・コードのポイント
オフセットの設定：表示位置の調整用にoffsetを200に設定し、スマホ向けに768px以下の画面では300に変更しています。
スクロール位置のチェック：スクロール位置を取得し、#fixed_onの上端からの距離と高さでボタン表示の範囲を計算します。
クラスの切り替え：指定した範囲内にスクロール位置が入ると.fixedクラスを追加してボタンを表示し、範囲外に出るとクラスを削除して非表示にします。
まとめ
これで何かと便利な特定位置でのみ追従するボタンが実装できましたね👏
キービジュアルやフッターではボタン表示したくない場合や、LP下部のフォームでCVのボタンが不要な時に使い勝手が良いと思います！
皆さんも実際に実装して便利さを感じてみてください〜！
それではまた！webデザイナーになるなる！
