初心者でも分かる！な、jQueryの「TOPへ戻るボタン」の作り方

• 2014.06.21(Sat) 07:30
• WEB制作

• Tweet

• 

画面を下にスクロールすると右下にスーっと出てくるページトップへの移動ボタン。ブログなんかではお馴染みで、あれってとても便利ですよね。今回はこの「TOPへ戻るボタンの作成方法」を、Javascript初心者でも理解できるように解説したいと思います。

あなたのボタン、フッターのテキストに重なったりしてませんか？その解決方法を紹介します。「完成したサンプルを手っ取り早く使いたい」という方は、こちらからコピーしてご利用下さい。

1TOPへ移動ボタンを作ってみよう

この章では、簡単にTOPへ移動ボタンの仕組みを説明しながら、作成する方法を紹介していきます。

1-1右下に出現するボタンのデザインを用意する

まず必要となるのが、右下に出現するページトップへ移動するためのボタンです。こちらはHTMLとスタイルシートで、次のように簡単に作ることができます。デザインは後から変更できるので、今はシンプルなものにしておきましょう。

スタイルシートとHTMLは下記をご利用下さい。周りを囲むコンテナ(divタグ)にはpage-topというidを、矢印を囲むaタグにはmove-page-topというidを付けており、これらはJavascriptで要素を操作するためのIDとなります。

このボタンにカーソルを合わせた時にじんわりと色が変わると思います。普通だったら「パッ」と変わってしまいますよね？この「じんわり」を実現するために、スタイルシートの11〜13行目の処理を加えています。この3行それぞれの0.3の数値を増やすことで、さらにじんわりさせることができます。

<div id="page-top">
	<p><a id="move-page-top">▲</a></p>
</div>

/* bodyは幅・高さのスペース確保用 */
body{
	width:100%;
	height:10000px;
}

#page-top{
	width:50px;
	height:50px;
}

#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background:#3b3b3b;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
}

#page-top p:hover{
	background:#8b8b8b;
}

#page-top p a{
	color:#fff;
	line-height:50px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}

1-2ボタンを右下に配置してみよう

前項では、ボタンを作成しました。では今度はそのボタンを画面の右下に配置してみましょう。それには、スタイルシートの#page-topセレクターに次の命令を加えて下さい。

#page-top{
	...
	position:fixed;
	right:16px;
	bottom:16px;
}

デモを見る

position:fixedというのは、「その要素を常に指定した場所に固定する」という命令です！固定というのは、画面をスクロールしても、ずっとその位置に止まり続けることを意味します。よくブログのサイドバーなどに、画面を追って付いてくるコンテンツがありますが、これもこのposition:fixedで固定しているんです。

そしてright:16pxは画面の右端から16px離れた位置、bottom:16pxは画面の下から16px離れた位置、という指定をする命令です。仮に左上に設置したい場合は、left:16px;、top:16px;と命令して下さい。

このようにボタンが設置されれば成功です！次の項目に進んで下さい。

1-3ボタンを非表示にしておく

「ずっとボタンを表示しておいてもいい」という場合は別ですが、今時の流行りを取り入れて、ある程度のところまでスクロールした時にボタンを出現させたいですよね？なので、デフォルトではボタンを非表示にしておきましょう。#page-topセレクターに次の命令を加えることで、非表示になります。

#page-top{
	...
	display:none;
}

デモを見る

ボタンが消えていれば順調です。次の項目に進んで下さい！

2Javascriptでじわっと出現させてみよう

続いて、前章で作成したボタンの機能を、Javascriptで実装していきます。Javascriptがちんぷんかんぷんという人が分かりやすいんじゃないかなーと、私が思う手順で説明していきますね。ちなみにライブラリとしてjQueryを利用しているので、読み込んでおいて下さい。

2-1jQueryの基本型

まず、下記の基本型を記述します。これは決まった型なので「理解」する必要はありません。「記憶」して下さい。記憶が無理なら毎回コピーすれば、その内覚えます。これは「HTMLを全部読み込んだら実行する」という意味を持ちます。

$(function(){
	//ここに命令を書く
});

例えば、「HTMLのあそこ(id="asoko")の色を変えてくれ」という命令を書いても、コンピュータがその部分のHTMLを読み込む前に命令を実行してしまったら「あそこ(id="asoko")なんて見つからないんだけど…」となってエラーが発生してしまいますよね。コンピュータの仕事は気まぐれ。

そういったことを防ぐために、「HTMLを全部読み込んでから、この命令を実行してね」と指定するのが、先ほどの型なんです。ちなみにこの型は、次の省略形です。「document(ドキュメント)」が「ready(準備)」できたら、と考えるとイメージ湧きますよね。

$(document).ready(function(){
	//ここに命令を書く
});

なのでこの型を覚えておくと、jQueryのプログラムを動かしやすいと思います。ちなみに「読み込まれる」というのは、「HTMLの構造(タグ)が読み込まれる」ことを指すのであって、「画像や動画の読み込みが完了する」ということではないのでご注意下さい。

$(function(){
	//HTMLの構造が全部読み込まれてから、実行する命令
});

2-2Javascriptでボタンを表示させてみる

ごめんなさい、かなり脱線してしまいましたが…、それでは、Javascript(jQuery)を使って、初期では非表示状態(display:hidden)になっているボタンを表示状態にさせてみましょう。非表示にしているボタンにはpage-topというidが付いてましたね。それを利用して、次のように命令します。

$(function(){
	//[#page-top]をゆっくり(slow)フェードインする
	$('#page-top').fadeIn('slow');
});

このJavascriptを、先ほどボタンをデザインしたHTML、スタイルシートと一緒に読み込むと、ボタンがじんわりと右下に現れるのが確認できると思います！slowをfastに変更すると、フェードインが速くなります。

デモを見る

Javascriptがページの読み込みが完了したタイミングで、非表示状態のボタンをフェードインさせているわけです。全然難しくないですよね！

3スクロールイベントを加えよう

先ほどは、読み込みが完了したら、ボタンをフェードインさせましたが、今度は「スクロールしたら」という条件でボタンをフェードインさせてみましょう。

3-1スクロールしたらボタンを表示させてみよう

スクロールしたらボタンをフェードインさせるには、次(2、5行目)のように命令を加えます。

$(function(){
	$(window).scroll(function(){
		//[#page-top]をゆっくりフェードインする
		$('#page-top').fadeIn('slow');
	});
});

簡単に言うと、ウィンドウ上($(window))で、スクロール(scroll)をしたら、その()内の処理を実行するという指定です。先ほど紹介したJavascriptを、これに書き換えて実行してみて下さい。スクロールをしたタイミングでボタンがフェードインするようになります。

デモを見る

このように、スクロールしたタイミングでボタンが表示されるようになれば成功です！

3-2ある程度までスクロールしたらボタンを表示させる

「スクロールしたらボタンを表示させる」ところまで来ました。今度は、それに「指定した位置まで」という条件を加えてみましょう。それには、Javascriptに次の命令を加えます。加えた行はハイライトしてあります。

$(function(){
	$(window).scroll(function(){
		//最上部から現在位置までの距離を取得して、変数[now]に格納
		var now = $(window).scrollTop();

		//最上部から現在位置までの距離(now)が1500以上だったら
		if(now > 1500){
			//[#page-top]をゆっくりフェードインする
			$('#page-top').fadeIn('slow');
		}
	});
});

$(window).scrollTop()で、「現在見ている画面の一番上が、そのページ(コンテンツ)の最上部から何ピクセル離れているか」、つまり「最上部からの距離」を数値で取得することができます。上記サンプルでは、「距離が1500pxを超えたら」という条件で、ボタンをフェードインさせているというわけですねー。

デモを見る

$(window).scrollTop()のイメージ

私の拙い文章では分かりづらいと思うので、$(window).scrollTop()をイメージにしてみました。この距離を$(window).scrollTop()で取得できるというわけです。

3-3スクロールが戻ったら、再びボタンを非表示にする

さて、ある程度までスクロールしたらボタンを表示するようにしましたが、再び上までスクロールした時にはボタンを非表示にしないとかっこ悪いですよね…。そのための処理は次のように追加して下さい。要素をフェードアウトするにはfadeInをfadeOutに変えるだけです。

$(function(){
	$(window).scroll(function(){
		//最上部から現在位置までの距離を取得して、変数[now]に格納
		var now = $(window).scrollTop();

		//最上部から現在位置までの距離(now)が1500以上だったら
		if(now > 1500){
			//[#page-top]をゆっくりフェードインする
			$('#page-top').fadeIn('slow');
		//それ以外だったらフェードアウトする
		}else{
			$('#page-top').fadeOut('slow');
		}
	});
});

デモを見る

スクロールを進めるとボタンがフェードインし、逆に戻すとボタンがフェードアウトするようになります。

4クリックイベントを設定しよう

さて、それでは最後に肝心の「ボタンを押したらトップまで戻る」という機能を実装してみましょう。それには、まず次のようにイベントを作成します。

$('#move-page-top').click(function(){
	//[id:move-page-top]をクリックしたら起こる処理
});

これは、move-page-topというIDを持つ要素に、クリック(click)すると起こるイベントを設定するという命令になっています。例えば、clickの部分をdblclickにすると「ダブルクリックしたら」に変わります。Javascript(jQuery)には様々なトリガー(イベントを起こす条件)が用意されています。興味のある方は下記をご覧下さい。

続いて、「ページの一番上へ移動する」という処理を加えます。次の通りです。3行目は、ゆっくりとページの最上部までスクロールする処理です。この処理に関しては「上に戻るためのおまじない」程度に思って下さい。slowの部分をfastにすると、上に戻るスクロールスピードがアップします。

$('#move-page-top').click(function(){
	//ページトップへ移動する
	$('html,body').animate({scrollTop:0},'slow');
});

デモを見る

5フッターにボタンが重ならないようにしよう

よくフッターに、ページトップへの移動ボタンが重なってしまっているのを見かけます。これを防ぐため、ボタンのデザインを小さくしたり、フッターのスペースを広げるのもいいですが、それが難しい場合は「一番下に来た時だけボタンを消す」というような設定にしてみてはいかがでしょうか？

Syncerのスマホビューでもそういう設定にしていて、ページの一番下に来た時だけはボタンが消えて、フッターのメッセージが見えるようになっています。これがかなり快適なので、お勧めです！

5-1最下部からの距離を計算する

この機能を実装するためには「最下部からの距離が一定以下の場合はボタンを消す」という処理を加える必要があります。最下部からの距離は、「ページ全体の高さ」から、「スクロール量と画面の高さの合計」を引くことで、求めることができます。言葉だと分かりづらいので、イメージを用意してみました！

まず、そのページの全体の高さは、$('body').height()で取得することができます。この「全体の高さ」から…

この2つの数値を引けば、最下部からの距離(px)が求まりますねー。$(window).height()は、画面(ディスプレイ)の高さを取得する命令です。最下部からの距離を求める計算式は次の通りです…。

5-2$(window).height()のバグ？

この$(window).height()ですが、HTMLの最初にドキュメント宣言(<!DOCTYPE html>)をしておかないと、「画面(ディスプレイ)の高さ」ではなく、「ページ全体の高さ」を取得してしまいます。$(window).height()のバグと表現することもできるかもしれませんが…、この仕様に注意しましょー。覚えておくと、何かの時に役に立つと思います。

5-3最下部からの距離を元にした条件分け

以上を踏まえて、「最下部からの距離が200px以内の場合はボタンをフェードアウトする」という処理を加えてみましょう。先ほどまでのサンプルプログラムに、次のように処理を加えます。

//最下部から現在位置までの距離を計算して、変数[under]に格納
var under = $('body').height() - ($(window).scrollTop() + $(window).height());

//最下部から現在位置までの距離(under)が200px以下だったら
if(200 > under){ ...

6「TOPへ戻るボタン」の完成版サンプルプログラム

長々と説明してきましたが、以上のことを踏まえて完成したデモページが下記です。ボタンを表示、非表示する距離を変更したい場合は58行目を調整して下さい。自身の環境でデモを試したい場合は、そのままHTMLファイルとして保存して下さいね！

デモを見る

<!DOCTYPE html>
<html>
<head>
<title>TOPへ戻るボタンのデモ</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body{
	width:100%;
	height:10000px;
}

#page-top{
	width:50px;
	height:50px;
	position:fixed;
	right:16px;
	bottom:16px;
	display:none;
}
 
#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background:#3b3b3b;
}
 
#page-top p:hover{
	background:#8b8b8b;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
}
 
#page-top p a{
	color:#fff;
	line-height:50px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}
</style>
</head>
<body>
<div id="page-top">
	<p><a id="move-page-top">▲</a></p>
</div>
<script>
$(function(){
	$(window).scroll(function(){
		//最上部から現在位置までの距離を取得して、変数[now]に格納
		var now = $(window).scrollTop();

		//最下部から現在位置までの距離を計算して、変数[under]に格納
		var under = $('body').height() - (now + $(window).height());

		//最上部から現在位置までの距離(now)が1500以上かつ
		//最下部から現在位置までの距離(under)が200px以上だったら
		if(now > 1500 && under > 200){
			//[#page-top]をゆっくりフェードインする
			$('#page-top').fadeIn('slow');
		//それ以外だったらフェードアウトする
		}else{
			$('#page-top').fadeOut('slow');
		}
	});

	//ボタン(id:move-page-top)のクリックイベント
	$('#move-page-top').click(function(){
		//ページトップへ移動する
		$('html,body').animate({scrollTop:0},'slow');
	});
});
</script>
</body>
</html>

7TOPへ戻るボタンに使えそうなアイコン素材いろいろ

TOPへ戻るボタンに使えそうな、素敵なアイコン素材を配布しているサイトをまとめてみました。自分の好みに合うものを使ってみましょう。

7-1やじるし素材天国

「矢印素材」を専門にした、素材配布サイトです。オーソドックスなものから、ユニークなものまで揃っています。カテゴリ別に検索もできるので、素敵なTOPへ戻るアイコンに出会えること間違いなし!?画像形式は基本的にPNG、JPG、AI形式が揃っています。

7-264 Vector Arrow Icons

66個の、矢印をテーマにしたベクター素材です。ダウンロードするには、メールアドレスの登録が必要です。

7-3Glossy Waxed Wood Icons Arrows

光沢のある木目調が特徴の矢印アイコンが、PNG形式で多数配布されています。利用に関しては、個人、商用利用無料とのことです。画像をダウンロードした時に同梱されるRead Meをご確認下さい。

7-456 Free Arrow Symbols & Icons

海外のデザイナーが公開している有名な矢印素材。シンプルながらも美しいものが揃っています。ページ下部の「Click to download the wayfinding arrow collection」というボタンからダウンロードできます。画像形式はAIです。

7-5Windows 8 Arrow Icons

dribbbleでWindows8の矢印アイコンを配布している方がいらっしゃいました。画像形式はAIです。

7-6Free Arrow Vector Icon Pack

WEB開発者であり、デザイナーでもあるSimon Lockyerさんが作成した、矢印のベクターアイコンです。個人利用、商用利用無料とのこと。

8TOPへ戻るボタンのデザインが良いWEBサイトいろいろ

自分のwebサイトにマッチした、オリジナリティ溢れる「TOPへ戻るボタン」を設置したいですよね。ただしボタンが目立ちすぎると本末転倒なので控えめに。

この章では、素敵なデザインや配置だったり、アニメーション・エフェクトが面白いTOPへ戻るボタンを設置しているwebサイトを紹介します。

8-1vasona networkd

ペンギンがボタンになっています。ディズニーならミッキー、熊本県ならくまモンなど、そのサイトに合ったキャラクターをボタンにすると統一感がありますよね。

8-2ナムコナンジャタウン

例えば「ナムコナンジャタウン」なんかは、公式のキャラクターのハピル君を配置しています。斜めから出てくる演出も、さりげなくて良いと思います。

8-3WEBデザインレシピ

WEBデザインレシピのTOPへ戻るボタン。デザインに溶け込んでいて素敵の一言です。

8-4ドットインストール

プログラミング学習サイトのドットインストール。右下にポツンとロゴのデザインをした「TOPへ戻るボタン」が置いてあります。言ってしまえば、あってもなくてもユーザーにはそこまで影響のない「TOPへ戻るボタン」。本当に必要な人なら探すことを考えると、普段は目に入らない程度の大きさで十分なのかもしれませんね。参考になります。

8-5あかめ女子のwebメモ

モブロガーとして有名なあかめさんのブログでは、「TOPへ戻るボタン」はサイドバー(左側)に配置されています。パソコンだったら画面端までマウスを持って行く手間がないので、その点では親切ですねー。

8-6トジョウエンジン

途上国の話題を取り上げるブログメディアのトジョウエンジン。下からピョコンと出てくるボタンにカーソルを合わせると回り出す面白いエフェクトが魅力です。このサイトを作成したwebデザイナーのTaneさんのセンスが凄い光ってます。

8-7東京スカイツリー

東京スカイツリーのホームページ。タワーのホームページらしく縦長で、TOPへ戻る際には、ソラカラちゃんが上まで連れて行ってくれます。空を飛んでいる演出がとっても気持ちいいですよ。演出にこだわるタイプのwebサイトなら、参考にしてほしいと思います。

8-8株式会社LIG

「面白いTOPへ戻るボタン」といえば、株式会社LIGのホームページを思い浮かべる人は多いんじゃないでしょうか？人がボタンになっていたり、演出がド派手だったり、さらにそこに広告枠があったりと、アイデアが盛り沢山に詰まっています。もうここまで来ると、ぶっ飛びすぎていて参考にしていいのかどうか分かりません。

• Tweet

• 

この記事へのコメント

感想、ご指摘などお気軽にお寄せ下さい。「関連記事を書いた」という方はご報告いただければリンクします。

コメントを書き込む

• コメント
• ログイン

お名前 :

• Twitterでログイン(認証)する
• Facebookでログイン(認証)する
• はてなでログイン(認証)する

※Twitter、Facebook、はてな、いずれかのアカウントをお持ちの方は、本人認証(ログイン)を行なうことができます。
※本人認証をすることで、書き込みの待ち時間なし、画像アップロード、アイコンなどが利用できます。
※認証時にサービスと連携しますが、名前とアイコン以外の情報を読み込んだり、また書き込みを行なうことはありません。連携で要求する権限は「公開情報の読み取り」のみです。

現在、1件のコメントがあります。

あらゆ
2014.06.21 07:53

このサイトのトップへ戻るボタンはデカすぎて鬱陶しいですね...。 ということで、改善しようとは思っています...。

記事の更新履歴

• 記事を公開しました。
  2014/06/21 07:30