ページ内を自在にスクロール

わずか6行で実装できるjQueryを使ったスクリプトです。
今回のスクリプトはボタンをクリックしてページ内の任意の箇所へスクロールする機能です。
いくつかプラグインがありますが数行で実装できる機能なので、個人的にはわざわざプラグインを利用する必要がないかと思います（ページ読み込み時にリクエストも増えるし）。
ついでにページのトップへスクロールする方法（こちらは4行）も記載します。

ページ内を自在にスクロール

■html

<body>
<div id="sample">

<ul>
<li class="btn_sample">サンプル1へ</li>
<li class="btn_sample">サンプル2へ</li>
<li class="btn_sample">サンプル3へ</li>
</ul>

<div class="content">サンプル1</div>
<div class="btn_top">ページ上部へ</div>
<div class="content">サンプル2</div>
<div class="btn_top">ページ上部へ</div>
<div class="content">サンプル3</div>
<div class="btn_top">ページ上部へ</div>

</div>
</body>

■javascript

$(function() {

	//ページ内スクロール
	$(".btn_sample").click(function () {
		var i = $(".btn_sample").index(this)
		var p = $(".content").eq(i).offset().top;
		$('html,body').animate({ scrollTop: p }, 'fast');
		return false;
	});

	//ページ上部へ戻る
	$(".btn_top").click(function () {
		$('html,body').animate({ scrollTop: 0 }, 'fast');
		return false;
	});

});

解説

まずはページ内のスクロール処理です。
class「btn_sample」をクリックした際に、クリックした番号（index）を取得し変数「i」に格納します。
ちなみにindexは0から始まる番号になります。もし該当する要素がない場合は「-1」を返します。

	$(".btn_sample").click(function () {
		var i = $(".btn_sample").index(this)

続いて変数「i」に格納した番号と同じ番号のclass「content」の「top」の位置（絶対位置）を取得します。
もし、2つ目のclass「btn_sample」をクリックしていたら、2つ目のclass「content」の「top」の位置を取得します。
取得した「top」の位置は変数「p」に格納します。

		var p = $(".content").eq(i).offset().top;

最後はanimateを使って変数「p」で取得した「top」の位置までスクロールします。ちなみに第二因数の「fast」の値は任意で変更して下さい。
animate(params, options)

		$('html,body').animate({ scrollTop: p }, 'fast');
		return false;

ページの上部へスクロールして戻る処理ですが、こちらはよりシンプルです。
特に位置情報を渡す必要はない（ページのトップなので位置は0）ので、scrollTopの値を「0」にすればOKです。

		$('html,body').animate({ scrollTop: 0 }, 'fast');

2013年9月5日 jQueryで実装、表データの一括選択〜第一回〜 (0)
2011年3月7日オーバーレイ | よく使うjQuery (7)
2013年10月21日 jQueryで実装、表データの一括選択〜第三回〜 (0)
2011年4月18日 jQueryでフォームのユーザビリティを強化 (2)
2011年4月3日画像一枚でロールオーバー | よく使うjQuery (0)