REDLINE MAGAZINE | jQueryのスルスルスクロールを指定1つでバシバシ使う

jQueryのスルスルスクロールを指定1つでバシバシ使う

このブログでも使っているjQueryを使ったスルスルーと動くスクロールなんですが、どこからどこへ移動したのかを目で追えるので分かりやすいし、動きも気持ちいいので大好きです。

多くの案件では1ページ内にページの先頭へ戻るアンカーリンクのみコレを利用してたんですが、この動きがクライアントに大好評のようでページ内の他のアンカーリンクでも使いたいという要望が増えてきました。今までこの動きの指定をJSで指定してたところに1つリンクが増える程度ならclassとリンク先だけ変更して同じ記述をコピーしちゃえばいいやってJSが分からない私の発想で乗り切ってたんですが、1ページ内に5個も6個も増えてくるとさすがに書くのが面倒というか、ほとんど同じ処理なのに重複した記述は要領悪いよなぁと思い始めまして・・・。

例えばリンクのページなんかでカテゴリが5個あったとしてページの上の方でカテゴリ一覧リストからアンカーリンクでそれぞれのカテゴリへ、またそれぞれのカテゴリの末尾には「ページの先頭へ」のリンクが置かれてるっていう状況。そんな時JSに1つだけ指定を書いて済ませるにはどうしたらいいんかなぁというお話。

href属性が#で始まるaタグを探せばいいよね

幸いJS脳のない私でもjQueryを使って属性の値を取得する方法は知っていたので、それを使ってやってみました。ちなみに、このブログではjQueryの1.1系を利用しているので、スルスルスクロール用にinterface.jsを併用しています。

>>サンプルページ

まず最初にいつも通りjQuery本体とinterface.jsのスクロール用のファイルを読み込み。その後スクロールに関する指定。

<script language="javascript" type="text/javascript"><!--
$(document).ready(function() {
	$('a[@href^="#"]').click(function(){
		$($(this).attr("href")).ScrollTo(1000, 'easeout');
		return false;
	});
});
--></script>

こんな感じでうまくいきそう。1.2系の場合、確かinterface.jsを使ったこのスクロールはエラーが出たか何かでうまくいかなかった気がするんですが、他の方法でスクロールを実装してたとしても属性の値を取得する部分は一緒じゃないかなーとか思います。

ただ、hrefの値の頭に必ず「#」が入ってないといけないので、例えばスクロール先bodyに指定してる場合なんかはこのままじゃダメですよね。

最新バージョンだと属性セレクタの書き方が変わってた

どっかで新しいバージョンだと属性セレクタの書き方に変更があったとか一瞬目にした記憶が・・・と書くだけ書いて調べないのも無責任かと思ったので、ググってみたらやっぱりそんな事が書いてありました。

Release:jQuery 1.3 - jQuery JavaScript Library

上のページのChangesの部分の中に書いてありましたね。英語だと若干眩暈がしたので日本語ページも。

jQuery1.3 リリースノート - jQuery 1.3.1 日本語リファレンス

セレクターの属性指定に"@"が使えなくなりました。これまで[@attr]という記述をしていた場合、これを[attr]としてやる必要があります。とあるので、該当バージョンの場合は上のソースから属性セレクタの@を抜いてやってください。

CSSのセレクタエンジンがSizzleってのに変わったんですね。新しく改良されるのはいいんですが、バージョンアップしたファイルに差し替える時の動作確認って結構面倒だったりしますね・・・。

jQueryのダウンロード

jQuery本家はこちら

jQuery: The Write Less, Do More, JavaScript Library

こちらのページから以前のバージョンもダウンロードできます。

Downloading jQuery - jQuery JavaScript Library

あとこのブログで使わせていただいてるinterface.jsのリンクも一応書いておきますね。

Interface elements for jQuery - About Interface

必要なものだけ選択してダウンロードもできるので、そうしたい場合はこちらのページから必要なものをピックアップ。今回のだったら「scroll」ってやつ。

2009年01月28日 00:38 | Red | パーマリンク