スムーススクロールを使いたいときのメモ。
今回はすでにprototype.jsが導入済みのサイトへの導入のため、
jQeuryを使わずに prototype.js + scriptaculous.js でスクロールする方法です。
jQueryの場合は、
http://coliss.com/articles/build-websites/operation/javascript/296.html
↑こちらが良さげです。
（さまざまなエフェクトが用意されているjQueryに標準で用意されていないのが意外でした。）
あ、そうそう、scriptaculous.jsのダウンロードはこちらで、、、
http://script.aculo.us/
では、実装。
<script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="scriptaculous.js?load=effects"></script>
↑まずはライブラリをHTMLにロードしてやらないことにはお話にならないので、
ロードしましょう。
で、スクロール先のエレメントを用意します。
<div id="scrollToID"></div>
とか
<a name="scrollToID" id="scrollToID"></a>
とか。
とにかくエレメントがあればブロック要素だろうがアンカーだろうがスクロールしてくれるみたいです。
便利。
で、スクロールする関数を用意しましょう。
<script type="text/javascript">
function _scrollTo( id ){
new Effect.ScrollTo(id);
}
</script>
たったこれだけ。
new Effect.ScrollTo(スクロールさせたいエレメントのID）;
↑そう、たったこれだけなのだ。
上記例では、第二引数は省略してあるけれど、
第二引数でオプションを指定して、スクロールする時間を変えたり、スクロール完了後のコールバック関数を指定できたりするらしい。めちゃ便利。詳しくはこちらをご覧下され。
じゃあ最後は、定義した関数を呼び出すだけ。
<a href="javascript:_scrollTo('scrollToID');">クリックしてね☆</a>
リンクでやるならこんな感じね。
アンカーへジャンプするのの代わりに使うとかっちょいいサイトになるんじゃないかな。
当然、ボタンでやるならonclick属性で関数を呼び出してあげましょう。
ちなみに、アニメーションなしでスクロールするには、
Element.scrollTo(スクロール先のエレメントID);
を使います。こちらは、よりアンカータグへのジャンプに似た動きをします。<a>タグを使ってアンカーへジャンプした場合、ジャンプ前のURLとジャンプ後のURLが、WEBブラウザの履歴に残ってしまい、エンドユーザーに迷惑をかけることが多々ありますが、この方法なら、そんなことはありません。
ちなみに、当然といえば当然ですが、CSSで「display:none;」などを指定して見えていないエレメントへはスクロールしません。たとえばscriptaculous.jsのEffect.BlindDown関数などを使って表示/非表示の切替を行っている場合などは、確実に表示が完了した時点で、スクロールを開始しなければ、ページ最上部へスクロールされてしまうので注意が必要です。
で、まぁ動かしてみたところ、私の環境では、Firefoxでうまく動いてくれませんでした。
なんだかよく分からず小一時間悩んだところ、
http://d.hatena.ne.jp/zariganitosh/20081006
こちらのページの「スクロールアニメーションしない時…」を実践したところ、うまく動きました。
読んでも理屈が良く分からない・・・。うーむ・・・。
が、とりあえず動作は満足。ありがとうございます。
さらに、#を使ったアンカーへのジャンプを自動でscriptaculous.jsのスクロールに振り替えてくれるという話も見つけた。
http://www.u-ziq.com/blog/2007/03/prototypejs.html
今回は未実装だけど、使うケースは増えそうな予感。
【2009年5月21日追記】
名古屋のWEB開発業者さん「音生（ねお）」さんが、
スクロール専用のライブラリをリリースしてらっしゃいます。
ほかのライブラリと競合しないことがすばらしい。
scriptaculous.jsのスクロールを数日試してみましたが、
バグなのか仕様なのか、環境によって動作が？？？？なところが沢山ありました。
こちらのライブラリのがよさそうです。
おかしな動作がないわけではないですが、
ページのつくり方、スクリプトの書き方でほとんど改善できました。
ちなみにライセンスはMITなので、使いやすいです。
Comment feed