jQuery:スムースなスクロール(後編)

指定した位置へのスクロール

前回はリンク先の位置(top)の取得まで説明しました。今回は、その位置までスクロールする
処理を説明します。スクロールは、これまでもアニメの演出に利用してきたanimateメソッドを
利用するのですがセレクタの設定に問題があります。
 
問題といってもjQueryのバグとかではなく、ブラウザ毎の扱いの違いです。ページのスクロール
は表示部分を移動させるのですから、セレクタとしてはbodyタグを利用するのが(私は)正しい
と思うのですが、htmlを利用しないと機能しないブラウザがあるそうなのです。
 
セレクタを設定した(html or body)2種類のファイルを用意したので、
ブラウザ毎に機能する/しないを確認してください。
・セレクタにbodyを使用したサンプル:06_scroll_4a.html
・セレクタにhtmlを使用したサンプル:06_scroll_4b.html

有効だったタグを表にしてみました。
ネット上ではhtml派のものが多そうな印象だったのですが、私の環境で調べてみると
以下の様にbody派が圧倒的に多かったです。

●Machintosh
safari (ver5.1):body
firefox (ver3.6.12):body
chrome (ver14.0):body
opera (ver10.62):body、html

●windows
IE8(通常モード):body
IE8(互換モード):body
firefox (2.0.0):body
firefox (6.0.2):body
chrome (ver14.0):body
opera (ver8.54):両方ともダメ
opera (ver11.51):body
 
上記の結果からbodyを利用すれば良さそうですが、念のためhtmlにも対応させるのが
普通のようです。ですので、以下の様にセレクタに2つの要素を設定します。
複数の要素をセレクタで利用する場合は,(カンマ)で要素を区切ります。
リファレンス:selector1, selector2, …, selectorN

$("body,html").animate({scrollTop : myPos}, 1000);

・セレクタにhtmlとbodyを使用したサンプル:06_scroll_5.html
ネット上では、この方法だとoperaでちらつくという情報があったのですが、私の環境では
確認できませんでした…。もしoperaでちらつく現象になった方は、環境を教えて頂けると
助かります(Mac or Win 、versionなど)。
 
 
この行にはセレクタ以外にもポイントがあります。これまでanimateではwidth, height, left,
topの属性を操作して演出していましたが、ページのスクロールでは以下の様にscrollTop
いう属性を利用します。これに前回求めたmyPosの値を設定することでスクロールするのです。

$("body,html").animate({scrollTop : myPos}, 1000);

 
 

aタグの機能をOFFにする

ほとんど完成ですが、最後にもう1つ処理を追加します。
06_scroll_5.htmlでは最後のcontent_5のdivだけ色を赤にしています。06_scroll_5.htmlで
content_5へのリンクをクリックしてください。多くのブラウザで一瞬content_5の赤が表示
されるはずです。※chromeではmac/winともにこの現象は発生しませんでした。
 
これはaタグがクリックされると、純粋にaタグの機能によってページを移動するのですが、
その後でjQueryの機能によってページのスクロールをするためです。
 
この問題を回避するためにはaタグの機能をOFFにしなければなりません。
そして機能をOFFにするためにはクリックの処理の最後に以下の1行を追加します。

return false;;

returnを追加したサンプルとして06_scroll_6a.htmlを用意したので確認してください。
content_5へのリンクをクリックしても一瞬赤いdivが表示されることはありません。
http://www.designdrill.jp/jquery/04/06_scroll_6a.html
 
ついでに本当にaタグの機能がキャンセルされているか、サンプルを用意したので確認してください。
06_scroll_6b.htmlではクリックのセレクタを「全てのaタグ」にしており、イベントハンドラ内で
return falseを実行しています。そのため全てのリンクはキャンセルされ、一切機能しません。
http://www.designdrill.jp/jquery/04/06_scroll_6b.html
 
06_scroll_6a.htmlで機能的には完成なのですが、前回紹介したサンプルでは各divに
「トップへ戻る」ボタンを追加してあります。このスクロールも単純にページの最初に設定された
アンカーへ移動しているだけですので、特に説明を追加することはありません。

sample :スムースなスクロール
http://www.designdrill.jp/jquery/04/06_scroll.html

 
最後にreturnのデメリットについて補足したいと思います。returnを追加するとaタグの機能が
OFFになるため実際にはページを移動していません。そのためURLが変更されないのです。
つまりブックマークする際、#のアンカーにブックマークされないのです。
もし長大なページでアンカーへのブックマークが考えられるようなケースでは、
このスクロールの利用を避ける方が良いかもしれません。
※javaScriptで動的にURLの表示を変更することは可能なので、そのような処理を追加すれば対応可能かもしれません。
 
といった感じで、スムースなスクロールの説明はおしまいです。 
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


+ 六 = 9


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>