More than 5 years have passed since last update.

【jQuery】.animateでscrollTopを指定する際、2回コールバックが呼ばれてしまう問題を何とかする

Posted at 2017-07-04

jQueryでアニメーションを伴ったスクロール処理をする際、
Webkit系と非Webkit系どちらも対応させる為に以下のような記述をするかと思います。

$('html, body').animate({
  scrollTop: 0
}, 500);

スクロール終了時に何らかの処理を入れたい場合、
以下のようにコールバックを指定するのですが、
下記のように書くとhtml、bodyそれぞれで2回コールバックが呼ばれてしまいます・・・。

$('html, body').animate({
  scrollTop: 0
}, 500, function() {
  // do something...
  // ここが2回呼ばれてしまう
});

こんな場合は.promise()を使うとうまくいきます。
全てのアニメーションが終了した際にresolve()が呼ばれる模様。
超便利！

$('html, body').animate({
  scrollTop: 0
}, 500)
.promise()
.done(function() {
  // do something...
  // 1回しか呼ばれない！
});