別ページへ移動する際、リンク先のアンカー名を指定して目的の位置まで部分をページ頭にすることがあるかと思います。
今回はjQueryでスクロールさせながら移動するサンプルスクリプトを紹介します。
今回のスクリプトを作成する上でヒントになったサイトはこちらです→jQueryでQueryStringをパースして配列で受け取れる便利関数
今回はjQueryでスクロールさせながら移動するサンプルスクリプトを紹介します。
今回のスクリプトを作成する上でヒントになったサイトはこちらです→jQueryでQueryStringをパースして配列で受け取れる便利関数
リンク先ページの指定位置にスクロールで移動
■html（リンク元ページ）
<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>
■html（リンク先ページ）
<div id="sample"> <div>ブロックコンテンツ1</div> <div>ブロックコンテンツ2</div> <div>ブロックコンテンツ3</div> <div>ブロックコンテンツ4</div> <div>ブロックコンテンツ5</div> </div>
■javascript
$(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の位置までスクロールさせます。
はじめまして。
「リンク先ページの指定位置にスクロールで移動」を参考にさせていただいております。
ひとつ質問させてください。
リンク元からページを開くとうまくスクロールするのですが、単独でページを開くと
IEではエラーが出てしまいます。↓
http://www.finefinefine.jp/wp/sample/test19.html
このエラーを解消したいのですが方法はありますでしょうか？
よろしくお願いします。
閲覧ありがとうございます。
只今帰省中の為、帰宅したら確認致します。
ちなみにIEのバージョンはわかりますか?
確認しました。
当方のサンプルに問題がありましたので習性しました。
http://www.finefinefine.jp/wp/sample/test19.html
具体的にはif文を追加して対処しました。
if(n.length < $("#sample div").size()) {
}
お世話になっております。教えてください。
プルダウンメニューのリンク先をスクロール移動させたいです。
リンク先は同じページ内リンク(アンカーリンク)です。
下記のように無理やり作ってみましたが、
http://asahiruban.main.jp/scrolltest/sample19.html
移動に時間がかかってしまします。
現在下記のソースになっています。
URL
ブロック1へgo
ブロック2へgo
ブロック3へgo
ブロック4へgo
ブロック5へgo
$(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;
}
});
ブロックコンテンツ1です
ブロックコンテンツ2です
ブロックコンテンツ3です
ブロックコンテンツ4です
ブロックコンテンツ5です