1.jQueryを使用できるようにする

1-1.jQueryの取得

当たり前のことといえば当たり前なのですが、まずはサイトでjQueryを使用できるようにするところからスタートです。

下記のリンク先へ行きます。

JQUERY 1.7.1 RELEASED

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をサイトに設置します。設置はヘッダーにファイルへのリンクを書くだけなのですが、リンク先の指定方法が２つあります。

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点です。

1. #toTop→ここでスクロールさせる要素のIDを指定
2. 100→ここでどの位置から出現させるか指定
3. 800→ここでスクロールスピードを設定

これをヘッダーにスクリプトとして読み込ませるか、外部のJSファイルに記述して読みこませればOKです。とても簡単ですね。サンプルはこのサイトということでよろしいかと思います。