REDLINE MAGAZINE | jQueryのスルスルスクロールを指定1つでバシバシ使うREDLINE MAGAZINEトップページへ

すべてのエントリを見る

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」ってやつ。

<< スペースは嫌、class付けるのも嫌な時用(追記有) | Spryの開閉パネルの件 >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/212

コメント (2)

jQuery1.2 以降なら以下のような記述でスクロールが実現できるようです。

var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);

http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12

>cyokodogさん
こんばんわー。コメントありがとうございました。
素敵なページ、お教えいただいてありがとうございました。offsetで位置を取得してscrollTopに指定するってことなんですね。jQuery単体で動作するのがいいですねー。

jQuery1.2で加わった内容の方も見てきました。
http://docs.jquery.com/JQuery_1.2_Roadmap#Animating_scrollLeft.2FscrollTop

このブログの他に実務のサイトでもいまだに1.1系を使ってるところが何箇所かあるんですが、バージョンアップした方がいいかなーという気になってきました。




※コメント欄に「<」「>」等を含むソースを記載する場合は実体参照に変換してください。

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。