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

スクロールの途中で出現するフローティングボタンの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()で表示させるような処理としています。

おわり

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

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

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

WordPressが得意なWeb屋。HPcode代表。

300件以上のWordPressカスタマイズを対応してきました。SE → 農家 → アフィリエイター → Web屋。生まれは三重県。

目次