前回、「Web初心者がjQueryを始めるための準備」で、実装する前の準備の方法を記事にしました。今回は、ページの先頭に戻るjQueryを実装します。
ページコンテンツ
jQueryを動かすために STEP1
ヘッダー内に下記の記述を書きます
|
1 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
実際に動く記述を書きます STEP2
さっき書いたコードの続きに書きます。
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(function(){ $("#gotoTop a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) }); </script> |
簡単に説明すると#gototopのaタグで囲まれたボタンを押すと、ページの先頭に戻るという設定です。
ボタンの設置します STEP3
|
1 |
<p id="gotoTop"><a href="#wrap">ページトップへ</a></p> |
戻る場所を作ります STEP4
|
1 2 |
<div id="wrap"> </div> |
この記述だけでは、戻ったことがわかりませんので、改行＜br＞など入れてスクロールできる長さまで何かコンテンツに入れるとわかります。
まとめ
記述だけではと思いましたのでサンプルも作りました。
[サンプル] jQuery ページ先頭へ戻る
よくわからなかった人もいるかもしれませんが、このサンプルのソースを全部コピーしても使えます。実際に「ページ先頭へ戻る」は、よく使われるjQueryです。記述も難しくはありませんので是非挑戦してください！
※firefox、クローム、IEで動いていることを確認しております。
