【jQuer】ボタンを固定し指定の場所までスクロールさせる方法

 2021年10月29日
CODE
この記事のURLとタイトルをコピーする
ボタンを固定し、クリックすると指定の場所までスクロールさせる備忘録です。

ブラウザの右下にボタンを固定させ、ボタンをクリックすると指定の場所までスムーススクロールします。
固定したボタンはjQueryで表示範囲を指定し、指定範囲外になると非表示になります。


今回は1番下にある「Area4」をスクロール先に指定しています。
LPなどの1枚ものを想定し、1番下にフォームなどのCVさせたいコンテンツがあると仮定しています。


ボタンを設置

HTML・CSS・jQueryのファイルを用意します。

HTML

ボタンを作るためのHTMLをbodyタグ内に記述します。
DEMOサイトでは、footerタグ内に置いています。

スクロール先のsectionタグには、ID名とclass名を指定します。 ID名はボタンのスクロール先の指定としてaタグに置きます。
class名はjQueryで画面左上からArea4までの距離を取得する際に使用します。

CSS

PCではposition: fixed;で右下に固定。
スマホではwidth: 100%;で帯のように固定しています。

ボタンを下からふわっと表示させたかったので#page-linktransform: translateY(100px);で位置を下にずらし、opacity: 0;で透過に。
@keyframesでアニメーションを設定しました。

jQuery

スクロール先のArea4が、ブラウザの可視範囲に入ったらボタンを非表示にします。

12行目$(window).height();でウィンドウの高さを取得し変数windowHeightに、13行目ではArea4までの距離を取得して変数entryPosに入れています。

14行目のif文でentryPosのみだと「Area4がブラウザのトップにたどり着いたときにボタンを非表示」にします。
entryPos – windowHeightでウィンドウの高さを引いてあげると、「可視範囲に入ったときに非表示」にすることができます。

今回は後者を実装したかったので、if (scroll <= entryPos - windowHeight)で記述しました。

まとめ

jQueryの表示範囲をより詳しく設定してあげると、「特定のエリアのみにボタンを表示」など応用ができますね。
サイトに合わせて、ぜひカスタマイズしてみてください!
この記事のURLとタイトルをコピーする


share