スクロールすると出現する「トップヘ戻るボタン」実現するjQueryのスクリプト
1.jQueryを使用できるようにする
1-1.jQueryの取得
当たり前のことといえば当たり前なのですが、まずはサイトでjQueryを使用できるようにするところからスタートです。
下記のリンク先へ行きます。
2012年3月17日時点での最新バージョンです。
そこでは下記のようにふたつのリンクが並んでいます。
- http://code.jquery.com/jquery-1.7.1.min.js
- http://code.jquery.com/jquery-1.7.1.js
これはどちらを選んでも良いのですが、min.jsの方がファイルサイズが小さいので、そちらを選ぶのが良いかと思います。
1-2.jQueryの設置
次にjQueryをサイトに設置します。設置はヘッダーにファイルへのリンクを書くだけなのですが、リンク先の指定方法が2つあります。
1.jQueryのサイトで公開されているコードに直接リンクをはる
この場合は下記のようになります。
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
2.自サイトの「js」フォルダにダウンロードしてそこへリンクを貼る
この場合は下記のようになります。
<script src="http://www.mysite.com/js/jquery-1.7.1.min.js" type="text/javascript"></script>
正直これはどちらでも良いと思います。なんか手元に置いておきたいなーという方はDLすればいいんじゃなかろうかと。
2.HTMLを記述
続いてHTMLの方を記述します。ポイントは単純で、スクロールして表示させたい要素に任意のIDをふるだけです。以下、記述例です。
<div id="toTop"> <p><a href="#wrapper"><img src="http://www.mysite.com/img/back_to_top.gif" alt="Back To The Top" /></a></p> </div>
ここではわかりやすいように「toTop」というIDにしました。
3.スクリプトを記述
そして下記のスクリプトを記述します。
$(document).ready(function(){ $("#toTop").hide(); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#toTop').fadeIn(); } else { $('#toTop').fadeOut(); } }); $('#toTop').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); });
ここでのポイントは3点です。
- #toTop→ここでスクロールさせる要素のIDを指定
- 100→ここでどの位置から出現させるか指定
- 800→ここでスクロールスピードを設定
これをヘッダーにスクリプトとして読み込ませるか、外部のJSファイルに記述して読みこませればOKです。とても簡単ですね。サンプルはこのサイトということでよろしいかと思います。
コメント