数あるサイトの中には、ページを下にスクロールしていくとサイトの上部に戻るボタンが現れ、それを押すとぺージトップに戻るボタンを見ることがあると思います。
そこで今回はページトップに戻るボタンの設置方法を解説したいと思います!

1. ページトップに戻るボタンの設置方法

 まず、以下のデモページのようなページトップに戻るボタンを設置する方法を解説したいと思います。

デモページ
上のデモページでは、ページを下部までスクロールするとスクロールボタンがあり、それを押すとページトップ(<div id=”a”>)に戻るようにjQueryを設置しています。
それでは、設置するには以下のコードを設置します!

HTMLを設定

 まず、ページトップに戻るボタンは以下のようなコードを設置します。

<p class="pagetop"><a href="#">トップ</a></p>

CSSを設定

 ボタンのCSSは例として以下のように設定しました。

.pagetop {
	width: 200px;
	float: right;
	margin: 0 20px 20px 0;
	background: #3333ff;
	padding: 10px 20px;
	text-align: center;
}

.pagetop a {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

jQueryを設定

 では実際にページトップに戻るjQueryのコードを設置してみましょう!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>
$(document).ready(function() {
	var pagetop = $('.pagetop');
	pagetop.click(function () {
		$('body, html').animate({ scrollTop: 0 }, 500);
		return false;
	});
});
</script>

5行目で、変数として.pagetoppagetopと設定しています。
その上で、6~8行目で変数pagetopをクリックした時にページトップに戻るよう指定しています。
ちなみに

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

上の500という数値はページトップに戻るまでのスピードを設定しているので、この数値が200、100というように小さくなるとスピードが速くなります。

2. ページをスクロールするとページトップに戻るボタンが現れるよう設定

 次に以下のデモページのようにページをスクロースるするとページトップに戻るボタンが現れるようjQueryを設定してみます。

デモページ

HTMLを設置

 まず、HTMLコードを以下のように記述します。

<p class="pagetop"><a href="#">トップ</a></p>

CSSを設定

 続いてCSSを設定します。

.pagetop {
	position: fixed;
	width: 200px;
	right: 20px;
	bottom: 0;
	background: #3333ff;
	padding: 10px 20px;
	text-align: center;
}

.pagetop a {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

ここで気を付けるべきは、ボタンのCSSにposition: fixed;を記述して位置を固定するということと、この時にrightbottomで隙間を設定する、ということです。
※ちなみにこの時にfloat設定しても意味がないのでお気を付けて!

jQueryを設定

 では実際にページトップに戻るjQueryのコードを設置してみましょう!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>
$(document).ready(function() {

	var pagetop = $('.pagetop');
	pagetop.hide();

	$(window).scroll(function () {
		if($(this).scrollTop() > 50) {
			pagetop.fadeIn();
		} else {
			pagetop.fadeOut();
		}
	});
	pagetop.click(function () {
		$('body, html').animate({ scrollTop: 0 }, 500);
		return false;
	});

});
</script>

まず5行目でclass名pagetop変数pagetopにしています。

そして、6行目でデフォルトではボタンを非表示に設定しており、その上で7~12行目でページをスクロールするとボタンが現れるように設定しています。

if($(this).scrollTop() > 50) {

上のコードで、ページ上部から50pxスクロールしたらボタンが現れるよう設定していますので、ボタンを表示させるにはページをスクロールしてからどれくらいにするのか、というのを設定できます。

まとめ

 以上がページトップボタンの設置方法になります!この機能はサイトを制作する上でユーザーにとって便利な機能になるので、是非とも設置してみましょう!

スポンサーリンク