スクロールの途中で出現するフローティングボタンのJavaScript

2018年1月1日2021年11月26日

スクロールの途中で出現するフローティングボタンのJavaScriptの書き方を紹介します。

「トップへ戻る」「メニュー」「導線ボタン」など、いろいろ使い勝手の良いボタンなので、覚えてくと重宝します。

はにわまん

フローティングボタンは今風のWebサイトでは欠かせない要素ですよね

HTML

<div class="floating">
	<a href="#">トップへ</a>
</div>

divで囲っていますが、aタグに直接クラスを指定しても大丈夫です。（JavaScriptやCSSを少し書き換えるけど…）

CSS

.floating {
	position: fixed;
	right: 8px;
	bottom: 8px;
	display: none;
}
.floating a {
	display: block;
	color: #fff;
	background: #000;
	padding: 8px;
	text-decoration: none;
	opacity: 0.6;
}
.floating a:hover {
	opacity: 1;
}

position: fixed;で右下に固定しています。初期値はdisplay: none;で隠しています。

JavaScript

jQuery(window).on("scroll", function($) {
	if (jQuery(this).scrollTop() > 100) {
		jQuery('.floating').show();
	} else {
		jQuery('.floating').hide();
	}
});

jQuery('.floating').click(function () {
	jQuery('body,html').animate({
		scrollTop: 0
	}, 500);
	return false;
});

$(this).scrollTop() > 100の数字がフローティングボタンを表示するまでのスクロール量になります。

スクロールして指定した数字を超えると、show()で表示させるような処理としています。