リンク先ページの指定位置にスクロールで移動

別ページへ移動する際、リンク先のアンカー名を指定して目的の位置まで部分をページ頭にすることがあるかと思います。
今回はjQueryでスクロールさせながら移動するサンプルスクリプトを紹介します。
今回のスクリプトを作成する上でヒントになったサイトはこちらです→jQueryでQueryStringをパースして配列で受け取れる便利関数

<ul>
<li><a href="test19.html?no=0" target="_blank">このリンクをクリックするとブロックコンテンツ1にスクロールで移動</a></li>
<li><a href="test19.html?no=1" target="_blank">このリンクをクリックするとブロックコンテンツ2にスクロールで移動</a></li>
<li><a href="test19.html?no=2" target="_blank">このリンクをクリックするとブロックコンテンツ3にスクロールで移動</a></li>
<li><a href="test19.html?no=3" target="_blank">このリンクをクリックするとブロックコンテンツ4にスクロールで移動</a></li>
<li><a href="test19.html?no=4" target="_blank">このリンクをクリックするとブロックコンテンツ5にスクロールで移動</a></li>
</ul>

<div id="sample">
<div>ブロックコンテンツ1</div>
<div>ブロックコンテンツ2</div>
<div>ブロックコンテンツ3</div>
<div>ブロックコンテンツ4</div>
<div>ブロックコンテンツ5</div>
</div>

$(function() {
	var n = window.location.href.slice(window.location.href.indexOf('?') + 4);
	if(n.length < $("#sample div").size()) {
		var p = $("#sample div").eq(n).offset().top;
		$('html,body').animate({ scrollTop: p }, 'slow');
		return false;
	}
});

解説

まずはリンク元のhtmlから解説します。

<li><a href="test19.html?no=0" target="_blank">このリンクをクリックするとブロックコンテンツ1にスクロールで移動</a></li>

リンク先のURLの後ろにパラメータをつけます→”リンクURL?no=0”
そして、リンク先のファイルにパラメータを解析するスクリプトとパラメータを元に指定の箇所へスクロールするスクリプトを記述します。
まずはパラメータの解析です。

	var n = window.location.href.slice(window.location.href.indexOf('?') + 4);

window.location.hrefでページURLを指定しslice(window.location.href.indexOf(‘?’)でURLの”?”の位置を検索します。
“+4″としているのは、?no=0のうち必要なのは”?”の位置から4文字目の”0″だけだからです。
そして取得した数値を変数nに代入します。
最後に変数nの値を利用して指定の位置にスクロール移動させます。

[▼追記2012/08/19]
直接リンク先のページを訪問した際にエラーが出ていましたので以下追加しましました。

	if(n.length < $("#sample div").size()) {

[▲▲▲]

<div id="sample">
<div>ブロックコンテンツ1</div>
<div>ブロックコンテンツ2</div>
<div>ブロックコンテンツ3</div>
<div>ブロックコンテンツ4</div>
<div>ブロックコンテンツ5</div>
</div>

今回は”no=0″の場合ブロックコンテンツ1に、”no=1″だとブロックコンテンツ2に移動させます。

	var p = $("#sample div").eq(n).offset().top;

$(“#sample div”).eq(n)で何個めのdiv要素かを指定します。変数nの値が0の場合は1つ目のdiv要素、1の場合は2つ目のdiv要素といった具合です。
そしてoffset().topで指定のdiv要素の表示位置を取得し変数pに代入します。

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

最後にanimateを使ってpの位置までスクロールさせます。