簡単!img画像を「スクロールすると出現するページトップへ戻るボタン」に設定するjQuery

こんにちは！
最近の休日は『ドラゴンズドグマオンライン』というゲームを楽しんでおります、Webデザイナーのノザキです。

『ドラゴンズドグマオンライン』が正式サービス開始からなんと10日で100万ダウンロードを突破したという…
とてつもない勢いで人気に拍車をかけておりますね！
私も休日はジョブ「ファイター」として、世界を巡っておりますよ（笑）
皆さんの冒険は順調に進んでおりますかー？

さてさて、趣味のお話はこの辺にしまして、タイトルにもありましたが今回はimg画像を「スクロールすると出現するページトップへ戻るボタン」に設定するjQueryをご紹介したいと思います。

私はWebを勉強し、初めて導入したjQueryがこの「スクロールすると出現するページトップへ戻るボタン」のjQueryでした。
当時は「初めてページに動きのあるものを実装できた!」と、とても喜んでいました!（といっても約1年前なので、まだまだ私も駆け出しですね…）

そのため今回は、私を喜ばしてくれたこの「スクロールすると出現するページトップへ戻るボタン」を設定するjQueryを初心に返ってご紹介です！
初心者の方でも簡単に実装できますので、ぜひ試してみてくださいね！

手順1:jQueryのライブラリを追加

でははじめに、jQueryをHTMLのhead内に追加していきます。
ここではAjaxを使っていきます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

1 2	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

手順2:JavaScriptを追記

次はHTMLのhead内にJavaScriptを追記していきます。

<script>
	$(function(){
    	// 「ページトップへ戻るボタン」の要素を隠します
    	$('#pagetop').hide();
    	// スクロールした場合のアクションが記されています
    	$(window).scroll(function(){
        	// スクロール位置が200pxを超えた場合に「ページトップへ戻るボタン」をフェードインで出現させる
        	if ($(this).scrollTop() &gt; 200) {
            	$('#pagetop').fadeIn();
        	}
        	// スクロール位置が200px以下の場合は「ページトップへ戻るボタン」を消しておく（フェードアウトで消える）
        	else {
            	$('#pagetop').fadeOut();
        	}
    	});
    	// 「ページトップへ戻るボタン」をクリックした場合のページトップへ戻るスピードの速さが記されています
    	$('#pagetop').click(function(){
        	$('html,body').animate({
            	scrollTop: 0 }, 500);
        	return false;
    	});
	});
</script>

$(function(){

// 「ページトップへ戻るボタン」の要素を隠します

$('#pagetop').hide();

// スクロールした場合のアクションが記されています

$(window).scroll(function(){

// スクロール位置が200pxを超えた場合に「ページトップへ戻るボタン」をフェードインで出現させる

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

$('#pagetop').fadeIn();

}

// スクロール位置が200px以下の場合は「ページトップへ戻るボタン」を消しておく（フェードアウトで消える）

else {

$('#pagetop').fadeOut();

}

});

// 「ページトップへ戻るボタン」をクリックした場合のページトップへ戻るスピードの速さが記されています

$('#pagetop').click(function(){

$('html,body').animate({

scrollTop: 0 }, 500);

return false;

});

</script>

各JavaScriptの命令内容はコメントアウトで記した意味となります。

「ページトップへ戻るボタン」を出現させたい位置を変更する場合は、上記で200となっている数字を任意で指定したい数字に変更してください。

また、「ページトップへ戻るボタン」をクリックした際に、ページトップへ戻るスピードを変更する場合は、現在500となっている数字を任意で変更してください。
数字が大きくなるとスピードは遅くなり、数字が小さくなるとスピードは速くなりますよ！

例）500を基準にしたとき

100 : スピード早い

500 : 基準

1000 : スピードゆっくり

手順3:HTML内に「ページトップへ戻るボタン」を追記

HTML内に「ページトップへ戻るボタン」のimgを追加しましょう。

<p id="pagetop"><a href="#container"><img src="images/img_pagetop.png" height="70" width="70" alt="ページトップボタン"></a></p>

1 2	<p id="pagetop"><a href="#container"><img src="images/img_pagetop.png" height="70" width="70" alt="ページトップボタン"></a></p>

idは任意でわかりやすい名前を付けてあげてください。ここでは「pagetop」と付けてあります。

リンクはご自身のWebサイトにあった指定をしてあげてください。例えば「wrapper」や「container」などです。ここでは「container」と付けてあります。

imgは任意のものをご準備ください。imgの階層もご自身のimgが入っているフォルダの階層でパスをつなげてあげてください。

※注意点※
手順2のJavaScript内で、$(‘#pagetop’)となっている部分がございます。この部分はidと同じ名前を付けてあげてください。

手順4:CSSを追記

さいごにCSSを追記します。

#pagetop {
    position: fixed;
    bottom: 50px;
    right: 30px;
}

#pagetop {

position: fixed;

bottom: 50px;

right: 30px;

}

このCSSは「ページトップへ戻るボタン」の出現位置を指定しています。
ここでは、表示ディスプレイの下から50px、右から30pxのところにボタンを出現させるようにしています。
任意で好きな場所に変更させてあげてください。

さいごに

この「スクロールすると出現するページトップへ戻るボタン」のjQueryは、駆け出しの私にjQueryを実装する楽しさを教えてくれました！
とても簡単に実装できると思いますので、jQuery入門のような感覚でぜひ試していただけるとうれしいです。

さいごまでご講読ありがとうございました。
ではでは、またです！