Interface.jsで簡単スムーススクロール
2007年6月18日
久々にjQueryネタです。最近jQuery版script.aculo.usなどと言われているInterface.jsについて何回かにわけて紹介していこうと思います。
まずはjQueryとInterface.jsをダウンロード
今回はjQueryとInterface.jsで作るスムーススクロールです。ページ内リンクを滑らかに移動するやつ 。script.aculo.usにも同様のエフェクトがありますが、たぶんこっちのほうが設定も簡単です。jQueryを使うので、まずはjQueryをダウンロードしてきましょう。最新版は1.1.2です(2007年6月現在)。 適当な場所に保存してください。
次ぎにInterface elements for jQueryよりスムーススクロールの機能を実現するJavaScriptをダウンロードします。ダウンロードページよりscrollのところにチェックを入れて「dowunload your section」をクリックします。
今回はスムーススクロール機能だけ使いたいので、scrollだけにチェックを入れてダウンロードしましたが、他に使いたい機能があれば複数の該当箇所にチェックを入れてダウンロードすればOKです。
head内にjsの読込みを指定
次ぎにhead内にjQueryとInterface.jsを読み込んでくるように指定します。
<script src="../jquery.js" type="text/javascript"></script>
<script src="../interface.js" type="text/javascript"></script>
srcはご自身の環境に合わせて変えてください。読み込ませる順番はjqueryが必ず最初で、そのあとにinterface.jsを読み込ませます。順番が違ってしまうと動かないので注意してください。さて、これでスムーススクロール機能を使う準備が整いました。
スムーススクロールの指定
実際にページ内リンクをクリックした際にスムーススクロールするように設定してみます。例えば下のように’#pageTop a‘と書くとPageTopというid名の中にあるaをクリックした時の動作を記述することができます。CSSのセレクタの書き方と同じですので分かりやすいと思います。
$(function(){
$('#PageTop a').click(function(){
ここにクリックしたときの動作を記述
});
})
スムーススクロールを使う場合はclick(function()以下に次のように書きます。
$(移動先の対象).ScrollTo(’スクロールする早さ’)
スクロールする早さはミリ秒か、’slow’ ‘normal’ ‘fast’のいずれかで指定します。最終的なコードはこんな感じになります。
$(function(){
$('#PageTop a').click(function(){
$('#header').ScrollTo(1000, 'easeout');
return false;
});
})
easing effectを使いたい場合は’easeout’などと指定してあげると動きが滑らかになります。お好みに応じて早さなどを調整してください。ちなみに、このサイトの「ページの先頭に戻る」でも使っています。
- このエントリーのトラックバックURL
- http://www.lllcolor.com/web/jquery/74.html/trackback
- カエル - 2007.07.20 -AM 1:05
Atsuyaさん、はじめまして。
時々見かけるスムーズスクロールをフレームワークでできないのかな？
って思って探していたら、こちらにたどり着きました。
それで早速
「Interface.jsで簡単スムーススクロール」
を使わせていただきました。
動作は期待以上のものだったのですが、横スクロールに適用すると
目的の場所にたどり着く前にスクロールが止まってしまいます。
横スクロールでは仕方ないのでしょうか？カエル
- A.Kawashima - 2007.07.20 -PM 9:08
＞カエルさん
はじめまして、こんにちわ。
横スクロールの件ですが、どのようなHTML+CSSで起こる現象でしょうか？
ブラウザによっても挙動が若干異なってきますので、当該現象の起こるHTMLなりブラウザ環境等を明記して頂けると確認ができるかと思います。で、当方でも試しに横スクロールのレイアウトを作りテストしてみました。
その結果Firefox2で同じような現象が起きました。IEやOperaでは普通に動くようです。海外のjQueryコミュニティなど情報を漁ってみたのですが、該当現象を解説している記事は残念ながら見当たりませんでした。恐らくInterface.jsのバグかFirefox特有の現象なのかなと思いますが、原因がはっきりしないので現段階では残念ながら対処法が見つからないという状況です。
今後も情報を漁ってみようと思います。何かわかりましたらまた書き込みます。お力になることができず申し訳ないです。
- カエル - 2007.07.22 -PM 5:04
Atsuyaさん、こんにちは。
わざわざお調べいただいて、ありがたくも恐縮です。
トリガとなる<a>からターゲットのオブジェクトまでが離れすぎているときに起きるようです（IE8/OP9/FF2）。引き続きいろいろ試してみたいと思います。
ありがとうございました。- BlurBlue-Note - 2007.10.6 -AM 10:37
class指定もいらない超お手軽スムーズスクロール…
最近ようやくｊQueryに目覚めました。 面倒な指定がこれほど楽々と出来てしまうと笑いが止まりません。 言い過ぎました。そんなに笑えません。 あったらよさげなライブラリを一…
- タップ - 2008.02.7 -AM 9:54
カエルさん、
まだ全ブラウザで確かめてはいないんですが、
どうもアンカーをtableで配置すると解決するようですよ・・・
まあ、今更table、なんですけど、
私は横スクロールのときはtableでアンカーをつけます。- タップ - 2008.02.7 -AM 10:49
いや、すみません、ダメですね、ブラウザの幅とかいろんな条件によって、tableでもバグが出ます。難しいですね。
- no2x - 2008.02.28 -AM 4:19
はじめまして。
jQuery1.2系でinterface.jsを使って、スムーススクロールを実現しようとするとエラーになってしまいました。jQueryのバージョンが上がって、仕様が一部変更になったみたいです。最近、JavaScript＆jQueryを使い始めたので正しいのかはよく解りませんが、以下に interface.jsの実際に行った修正点を書いておきます。—–
interface.js のソースファイルの「ifxscrollto.js」内を下記のように修正
jQuery.dequeue(z.e, ’interfaceFX’)
↓
jQuery(z.e).dequeue(’interfaceFX’)
—–これだけで、いけるようになりました。（他のinterfaceパッケージも利用している場合は、下記を参照してください）
ポイントは、
jQuery(ここにオブジェクト).dequeue(’タイプ’)ですので、interface.js のすべてのソースをこのように変更すれば、新しいバージョンのjQueryでも使えるようになります。たぶん。（スムーススクロール以外の機能は使ってないのでもしかすると、他にも変更が必要かもしれません）
Linuxとかお使いでしたら、
—–
#interface1.2ソースの置き場のディレクトリに移動
unzip interface_1.2.zip
cd interface\ 1.2/
cat source/*.js > interface.src.js
#置換作業（下記１行で）
perl -pe ’s/(jQuery)\.dequeue\((.+), (.+)\)/\1\(\2\)\.dequeue\(\3\)/i’ -i.backup ./interface.src.js
—–パックするには、
http://dean.edwards.name/packer/
とかのpackerを使えば快適になりますよね。余談でした。
以上報告でした。
- Links
