jQueryでスムーススクロールすると、コールバックが2回呼ばれちゃう問題

しばしばこんな風にjQueryでスムーススクロールを行うのですが、これだとcallbackが2回呼ばれてしまうのですね。

var position = 0;
var speed    = 400;
var ease     = 'swing';
var callback = function() {
    // do something...
};

$('html,　body').animate({scrollTop: position}, speed, ease, callback);
// これでは、htmlとbodyそれぞれで2回、callbackが呼ばれてしまうのだー

以前だと、以下のようにブラウザ判別して body か html のどちらかをセレクタに適応することで回避できたのですが、.browserはjQuery2/3ではもう使うことは出来ませんよね。このためだけにuserAgentからブラウザ判別するのも面倒ですね。

// Webkitならbody、それ以外ならhtmlをスクロールイベントの対象にするよ。
$($.browser.webkit ? 'body' : 'html').animate({scrollTop: position}, speed, ease, callback);

というわけで、最近は done() を使ってこんな風にしてますよ。有名なjQueryプラグインとかでも、このあたり結構いい加減だったりしてよくハマるので、知っておくと便利かもしれません。

// 完成形:)
$('body, html').animate({scrollTop: position}, speed, ease).promise().done(callback);