jQuery：スクロールで表示されるページトップの実装方法

Posted on September 27th, 2013
In: Tips

数多くのサイトで実装されているのを見かける、ページを一定量スクロールすると出現する「このページの先頭へ」のようなページトップを実装する方法を紹介します。このブログでも実装しているのですが、同じような動きを実装したいというお問い合わせをいただいたのでその方への回答も兼ねて、動きが被っている感じですが全7タイプの実装方法を紹介します。

「株式会社LIG [リグ]」で実装されているものや「【Ninja】jQueryとCSS3アニメーションで作る何度もクリックしたくなる「ページトップ」ボタン / SQUEEZE – Web Design Studio –」で紹介されている方法など、最近ではちょっと変わったタイプも多く見かけますが、今回は凝ったアニメーションなども特にないシンプルなものなので、どんなタイプのサイトにも合わせやすいかと思います。

はじめに…

以下で紹介しているものは全てjQueryを使用していますので、予めライブラリも読み込ませてください。
また、HTMLは全て以下のものを使用しています。

HTML

<p class="pagetop"><a href="#xxx">▲</a></p>

※ソース赤文字部分は任意で設定をしてください。
ここで紹介しているサンプルはclass="pagetop"を用いて実装していますので、クラス名を変更した場合はCSSやjQueryでの変更も忘れず行ってください。

サンプルでは基本的に「▲」の記号を表示して、背景色などをCSSでスタイルして実装しています。
テキストではなく画像を使ったものを実装したい場合は、HTMLで画像を指定、CSSではbackground-colorやborder-radiusなどそれぞれ必要ないものは削除してください。
また、全てposition: fixedを使ってページ右下へ固定配置しているので、表示される箇所を変更したい場合などはそれぞれ任意の数値に変更をしてください。

jQueryだけでの実装であれば問題なく動きますが、紹介しているサンプルの中にはborder-radiusやtransitionなど一部のブラウザでは使用できないCSSが使用されていますので注意してください。

jQuery：スクロールで表示されるページトップの実装方法目次

1. フェードで出現 #1

一番ベーシックな一定量スクロールしたらフェードで表示されるタイプのものです。
それぞれ下記のように記述します。

CSS

.pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 55px;
}
.pagetop a {
	display: block;
	width: 50px;
	height: 50px;
	background-color: #333;
	text-align: center;
	color: #fff;
	font-size: 24px;
	text-decoration: none;
	line-height: 50px;
}

jQuery

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

どれくらいスクロールしたら表示されるかの調整はjQuery 4行目の赤文字部分（上記ソースで700となっている部分）。
スクロールされる時の速度を調整したい場合はjQuery 11行目の赤文字部分（上記ソースで500となっている部分）をそれぞれ変更してください。
また、フェードイン・アウトのそれぞれの速度もfadeIn('fast')やfadeOut(1000)のように指定すれば変更できます。

実際の動きについては以下で確認できます。

DEMO 1

目次へ

2. フェードで出現 #2

基本的には「1. フェードで出現 #1」と同じで、先ほどは四角だったものをCSSを使って円形にしただけです。
それぞれ下記のように記述します。

CSS

.pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 55px;
}
.pagetop a {
	display: block;
	width: 50px;
	height: 50px;
	background-color: #333;
	border-radius: 50px;
	text-align: center;
	color: #fff;
	font-size: 24px;
	text-decoration: none;
	line-height: 50px;
}

jQuery

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

実際の動きについては以下で確認できます。

DEMO 2

目次へ

3. 下からスライドで出現 #1

このブログで実装しているタイプのもので、一定量スクロールしたら下からスライドして出現するタイプのものです。
ソース見た通りですが、予め要素を画面外に飛ばし、それをアニメーションさせながら画面内の特定の位置へ移動させています。

サンプルでは記号を使っていますが、例えば可愛いらしいイラストとかキャラクター画像などを用いて実装すれば、それらがスクロールするとピョコっと出現させるようなものを実装できたりもします。
それぞれ下記のように記述します。

CSS

.pagetop {
	position: fixed;
	bottom: -40px;
	right: 50px;
}
.pagetop a {
	display: block;
	width: 60px;
	height: 40px;
	background-color: #333;
	border-radius: 8px 8px 0 0;
	text-align: center;
	color: #fff;
	font-size: 24px;
	text-decoration: none;
	line-height: 40px;
}

jQuery

$(document).ready(function() {
	var flag = false;
	var pagetop = $('.pagetop');
	$(window).scroll(function () {
		if ($(this).scrollTop() > 700) {
			if (flag == false) {
				flag = true;
				pagetop.stop().animate({
					'bottom': '0'
				}, 200);
			}
		} else {
			if (flag) {
				flag = false;
				pagetop.stop().animate({
					'bottom': '-40px'
				}, 200);
			}
		}
	});
	pagetop.click(function () {
		$('body, html').animate({ scrollTop: 0 }, 500);
		return false;
	});
});

どれくらいスクロールしたら表示されるかの調整はjQuery 5行目の赤文字部分（上記ソースで700となっている部分）。
スクロールされる時の速度を調整したい場合はjQuery 22行目の赤文字部分（上記ソースで500となっている部分）をそれぞれ変更してください。

スライドの動きを調整する際はjQueryの'bottom': '0'や'bottom': '-40px'などで位置を、jQuery 10行目と17行目の赤文字部分（上記ソースで200となっている部分）でアニメーションの速度をそれぞれ任意のものに変更してください。
また、要素の幅や高さを変更したい際はそれぞれCSSも調整してください。

実際の動きについては以下で確認できます。

DEMO 3

目次へ

4. 下からスライドで出現 #2

基本的には「3. 下からスライドで出現 #1」と同じ動きです。
先ほどは一部を角丸にした四角形を画面下に固定していましたが、こちらは形を円形にして画面下からも少し離しています。
それぞれ下記のように記述します。

CSS

.pagetop {
	position: fixed;
	bottom: -50px;
	right: 55px;
}
.pagetop a {
	display: block;
	width: 50px;
	height: 50px;
	background-color: #333;
	border-radius: 50px;
	text-align: center;
	color: #fff;
	font-size: 24px;
	text-decoration: none;
	line-height: 50px;
}

jQuery

$(document).ready(function() {
	var flag = false;
	var pagetop = $('.pagetop');
	$(window).scroll(function () {
		if ($(this).scrollTop() > 700) {
			if (flag == false) {
				flag = true;
				pagetop.stop().animate({
					'bottom': '20px'
				}, 200);
			}
		} else {
			if (flag) {
				flag = false;
				pagetop.stop().animate({
					'bottom': '-50px'
				}, 200);
			}
		}
	});
	pagetop.click(function () {
		$('body, html').animate({ scrollTop: 0 }, 500);
		return false;
	});
});

実際の動きについては以下で確認できます。

DEMO 4

目次へ

5. 横からスライドで出現

同じく上記で紹介したスライドタイプの動きですが、こちらは下からではなく横からスライドしてくるタイプのものです。
それぞれ下記のように記述します。

CSS

.pagetop {
	position: fixed;
	bottom: 20px;
	right: -55px;
}
.pagetop a {
	display: block;
	width: 50px;
	height: 50px;
	background-color: #333;
	border-radius: 50px;
	text-align: center;
	color: #fff;
	font-size: 24px;
	text-decoration: none;
	line-height: 50px;
}

jQuery

$(document).ready(function() {
	var flag = false;
	var pagetop = $('.pagetop');
	$(window).scroll(function () {
		if ($(this).scrollTop() > 700) {
			if (flag == false) {
				flag = true;
				pagetop.stop().animate({
					'right': '55px'
				}, 200);
			}
		} else {
			if (flag) {
				flag = false;
				pagetop.stop().animate({
					'right': '-55px'
				}, 200);
			}
		}
	});
	pagetop.click(function () {
		$('body, html').animate({ scrollTop: 0 }, 500);
		return false;
	});
});

スライドの動きを調整する際はjQueryの'right': '55px'や'right': '-55px'などで位置を、jQuery 10行目と17行目の赤文字部分（上記ソースで200となっている部分）でアニメーションの速度をそれぞれ任意のものに変更してください。
また、要素の幅や高さを変更したい際はそれぞれCSSも調整してください。

実際の動きについては以下で確認できます。

DEMO 5

目次へ

6. 手前から出現

説明じゃ伝わりづらいと思いますが、ページを一定量スクロールすると手前からふわっと出現するように見せるタイプのものです。
それぞれ下記のように記述します。

CSS

.pagetop {
	position: fixed;
	bottom: 30px;
	right: 55px;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-ms-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}
.pagetop a {
	display: block;
	width: 50px;
	height: 50px;
	background-color: #333;
	text-align: center;
	color: #fff;
	font-size: 24px;
	text-decoration: none;
	line-height: 50px;
}
.pagetop.show {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

jQuery

$(document).ready(function() {
	var pagetop = $('.pagetop');
	$(window).scroll(function () {
		if ($(this).scrollTop() > 700) {
			pagetop.addClass('show');
		} else {
			pagetop.removeClass('show');
		}
	});
	pagetop.click(function () {
		$('body, html').animate({ scrollTop: 0 }, 500);
		return false;
	});
});

今までのものはスクロール量に応じてフェードイン・アウトするのをjQueryを使って実装していましたが、ここではjQueryを使ってスクロール量に応じてクラスを付加・除去し、手前から出現するという動きなどはCSSで実装しています。

簡単に説明すると、CSSのopacityで表示の切り替え、transformで要素の大きさを変更、transitionでアニメーションの時間指定をそれぞれ行っています。
（filterはIE用でとりあえず要素が出るようにという理由で記述してあります）
もっと動きを大きく見せたければtransform、動きのスピードをもっと早くしたり遅くしたいという場合はtransitionの値をそれぞれ変更してください。

jQueryは今までのものとほとんど変わらず、どれくらいスクロールしたら表示されるかの調整はjQuery 4行目の赤文字部分（上記ソースで700となっている部分）。
スクロールされる時の速度を調整したい場合はjQuery 11行目の赤文字部分（上記ソースで500となっている部分）をそれぞれ変更してください。
また、付加・除去するクラス名を変更したい場合は5行目と7行目の赤文字部分（上記ソースでshowとなっている部分）をそれぞれ変更してください。

実際の動きについては以下で確認できます。

DEMO 6

目次へ

7. 奥から出現

基本的な実装方法は「6. 手前から出現」と同じで、CSSのtransformの値を変更することで、ページを一定量スクロールすると奥から手前へふわっと出現しているように見せるタイプのものです。
それぞれ下記のように記述します。

CSS

.pagetop {
	position: fixed;
	bottom: 30px;
	right: 55px;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	-ms-transform: scale(0.3);
	-o-transform: scale(0.3);
	transform: scale(0.3);
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
}
.pagetop a {
	display: block;
	width: 50px;
	height: 50px;
	background-color: #333;
	text-align: center;
	color: #fff;
	font-size: 24px;
	text-decoration: none;
	line-height: 50px;
}
.pagetop.show {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

jQuery

$(document).ready(function() {
	var pagetop = $('.pagetop');
	$(window).scroll(function () {
		if ($(this).scrollTop() > 700) {
			pagetop.addClass('show');
		} else {
			pagetop.removeClass('show');
		}
	});
	pagetop.click(function () {
		$('body, html').animate({ scrollTop: 0 }, 500);
		return false;
	});
});

CSS・jQueryともに「6. 手前から出現」とほとんど同じものを記述してありますが、.pagetopのtransformの値だけ先ほどのものに比べて値を小さくしています。
先ほどのものはのtransformの値を大きめに設定（scale(1)以上）することで手前から出現するように見せていましたが、逆に小さい値を設定（scale(1)以下）にすると奥から手前へ出現するように見せることができます。

実際の動きについては以下で確認できます。

DEMO 7

目次へ