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

2021年10月29日 2021年12月21日

CODE

この記事のURLとタイトルをコピーする

ボタンを固定し、クリックすると指定の場所までスクロールさせる備忘録です。

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

DEMOで動きを確認 →

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

ボタンを設置

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

HTML

<p id="page-link"><a href="#area4">Area4はこちら</a></p>

1	<p id="page-link"><a href="#area4">Area4はこちら</a></p>

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

スクロール先のsectionタグには、ID名とclass名を指定します。

<section id="area4" class="areaScroll">

</section>

</section>

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

CSS

#page-link {
	position: fixed;
	right: 10px;
	bottom: 20px;
	z-index: 2;
	opacity: 0;
	transform: translateY(100px);
}

#page-link a {
	display: flex;
	align-items: center;
	background: #014785;
	border-radius: 3px;
	height: 60px;
	color: #fff;
	text-transform: uppercase; 
	text-decoration: none;
	font-size: 15px;
	padding: 0 20px;
	transition: all 0.3s;
}

#page-link a::after {
	content: "";
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(130deg);
    margin-left: 6px;
    margin-bottom: 5px;
}

#page-link a:hover {
	background: #002B50;
}

#page-link.upMove{
	animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#page-link.downMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
	opacity: 1;
	transform: translateY(0);
  }
  to {
	opacity: 1;
	transform: translateY(100px);
  }
}

@media all and (max-width: 767px) {
	#page-link {
		width: 100%;
		right: 0;
		bottom: 0;
	}
	
	#page-link a {
		border-radius: 0;
		justify-content: center;
	}
}

#page-link {

position: fixed;

right: 10px;

bottom: 20px;

z-index: 2;

opacity: 0;

transform: translateY(100px);

}

#page-link a {

display: flex;

align-items: center;

background: #014785;

border-radius: 3px;

height: 60px;

color: #fff;

text-transform: uppercase;

text-decoration: none;

font-size: 15px;

padding: 0 20px;

transition: all 0.3s;

}

#page-link a::after {

content: "";

width: 6px;

height: 6px;

border-top: 2px solid #fff;

border-right: 2px solid #fff;

transform: rotate(130deg);

margin-left: 6px;

margin-bottom: 5px;

}

#page-link a:hover {

background: #002B50;

}

#page-link.upMove{

animation: UpAnime 0.5s forwards;

}

@keyframes UpAnime{

from {

opacity: 0;

transform: translateY(100px);

}

to {

opacity: 1;

transform: translateY(0);

}

#page-link.downMove{

animation: DownAnime 0.5s forwards;

}

@keyframes DownAnime{

from {

opacity: 1;

transform: translateY(0);

}

to {

opacity: 1;

transform: translateY(100px);

}

@media all and (max-width: 767px) {

#page-link {

width: 100%;

right: 0;

bottom: 0;

}

#page-link a {

border-radius: 0;

justify-content: center;

}

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

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

jQuery

//	ページスクロール
$('#page-link a[href*="#"]').click(function () {
	var elmHash = $(this).attr('href');
	var pos = $(elmHash).offset().top;
	$('body,html').animate({scrollTop: pos}, 500);
	return false;
});
	
//フォーム固定ボタン
function PageScrollAnime() {
	var scroll = $(window).scrollTop();
	var windowHeight = $(window).height();
	var entryPos = $("areaScroll").offset().top;
	if (scroll <= entryPos - windowHeight){
      $('#page-link').removeClass('downMove');
      $('#page-link').addClass('upMove');
    }else{
      if($('#page-link').hasClass('upMove')){
        $('#page-link').removeClass('upMove');
        $('#page-link').addClass('downMove');
      }
	}
}
	
$(window).scroll(function () {
  PageScrollAnime();
});

$(window).on('load', function () {
  PageScrollAnime();
});

// ページスクロール

$('#page-link a[href*="#"]').click(function () {

var elmHash = $(this).attr('href');

var pos = $(elmHash).offset().top;

$('body,html').animate({scrollTop: pos}, 500);

return false;

});

//フォーム固定ボタン

function PageScrollAnime() {

var scroll = $(window).scrollTop();

var windowHeight = $(window).height();

var entryPos = $("areaScroll").offset().top;

if (scroll <= entryPos - windowHeight){

$('#page-link').removeClass('downMove');

$('#page-link').addClass('upMove');

}else{

if($('#page-link').hasClass('upMove')){

$('#page-link').removeClass('upMove');

$('#page-link').addClass('downMove');

}

$(window).scroll(function () {

PageScrollAnime();

});

$(window).on('load', function () {

PageScrollAnime();

});

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

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

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

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

まとめ

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

この記事のURLとタイトルをコピーする

« Safariのスタイル崩れをCSSハックで調整する方法【2021年10月】私が読んだWeb関連の本 »