• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN

[はじめてのjquery]ブログにあるととっても便利!「ページのトップに戻る」ボタンを実装してみた!!

jQuery Summit Notes
jQuery Summit Notes / Robert Banh

jqueryのお勉強ナー!!
@OZPA です。

ようやくドットインストールでのjavascriptの講座を見終わったので、こちらの講座を参考に、ずっと実装しようと思っていた「ページのトップに戻る」ボタンを実装してみました。

 

Skitched 20120508 184651

実装したのはブログの右下部分のこちらのボタン。
ある程度スクロールするとボタンがフェードイン、クリックするとページのトップに0.7秒かけて戻る、というスクリプト。

コード

以下備忘録。

<head>
(中略)
<script type="text/javascript" src="/jquery-1.7.1.js"></script>
(中略)
</head>

↑ヘッダーでjqueryを読み込みます。

そして、</body>の直前に以下のコードを実装。

 

<!-- 「トップへ戻る」ボタン -->
<div id="back-to-top" style="position:fixed;right:12px;bottom:12px"><a href="#"><img src="画像のURLを用意" /></a></div>
		
	<script>
	$(function(){
		$("#back-to-top").hide();
		$(window).scroll(function(){
			if($(this).scrollTop() > 500){
					$("#back-to-top").fadeIn();
			}	else{
					$("#back-to-top").fadeOut();
			}
		});
		$("#back-to-top a").click(function(){
			$("body,html").animate({
				scrollTop:0
			},700);
			return false;
		});
	});	
	</script>
<!-- 「トップへ戻る」ボタン ここまで -->
</body>

まぁ今はとりあえず</body>タグ直前に記述してますが、読み込むスクリプトが増えてきたらそのうち外部ファイル読み込みに変えるでしょう。

 

もしこのコードを真似する場合は

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

の「500」の部分を変えれば、「どれくらいのスクロールでボタンがフェードインしてくるか」を変動できます。

 

また

			$("body").animate({
				scrollTop:0
			},700);

の「700」の数値を変えれば「どれくらいの時間でトップに戻るか」を変更することができます。(1000=1秒)


最初、「60000」とかにして1分くらいかけてゆっっっくりとトップに戻るボタンにしようかと思ったけどさすがにやめた。
(エイプリルフールにでもやるか)

 

Back to top

↑のトップに戻る用ボタンはなんか適当に作りました。
当ブログ用に作成したモノですが、同じで良ければご自由にお使いくださいませ。(直リンク禁止)

 

初めてスクリプトを書いてみて

今回実装したのはjqueryの基礎の基礎である簡単なスクリプトなのですが、ただ用意されたモノをコピペするのと、一つ一つ理解しながら自分の手でコードを書いていくのとでは理解力が変わってくるな、と言うのをいたく痛感いたしました。
っていうか自分で書いたコードを実装するってとっても愛おしいですね!
そしてホントお勉強楽しい!!!ピャー!

長い記事など、スクロールを多用するページにはあると便利なこのボタン。
実装してみたいと言う方の参考になればこれ幸いです。

あらゆるプログラミング言語学習のきっかけに!神サービス「ドットインストール」で貴方も勉強しようず!! | OZPAの表4

↓すっごい分かり易くjqueryの基礎を学べます。オススメ!

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×