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

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

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

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

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
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;
});
</script>

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

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

おわり


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

「トップへ戻る」だけでなく、メニューや広告など、色々応用もできるので試してみてください。

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事