軽くハマって意味がわからず困っていた点。

JQueryの仕様もだいぶ慣れてきて、よーしパパアニメーション作っちゃうぞ☆
と懐かしいコピペばりの意気込みで「TOPへ戻る」リンクをクリックするとスムーズスクロールするような、そんなアニメーションを作成していたときのこと。

仕様したJQueryプラグインはこちら
・Jquery-1.5.2.js
・jquery.scrollTo-1.4.2-min.js

その他にも色々使ってたけどこのあたり。
処理の流れとしてはこんな予定だった。

  1. ボタンをクリックすると、一番下から特定のポジションまでスムーズスクロール
  2. スクロール後、チェックボックスの数を数えAjaxで通信処理
  3. 通信結果を受け取り、後処理

で、何が起きたかというと同じ処理が2回呼ばれてしまう・・・。
いつこうなったのか原因もわからず、サーバー側やブラウザの挙動を疑ったけどそうではないみたいなので、
かなりお手上げ状態だったがFireBugで処理1個ごとにブレイクポイントをしかけたら犯人がいた。


$('body' : 'html').animate(処理);
 

これ何かというと、スクロールのサンプルにあるんだけど、bodyかhtml要素に対して処理をするというもの。
ブラウザによって挙動が変わるためこのような仕様らしいんだけどこいつが悪さをしていた。

なのでこんな感じにしたらうまくいった。


// スムーススクロール
$(($.browser.safari ? 'body' : 'html')).animate({ scrollTop:0 }, speed, 'swing', function(){});
 


ブラウザごとの挙動を理解するのはなかなか難しい。