Edited at

$(‘body,html’)でコールバック関数が2回呼ばれるのをどうにかする

今更感満載ですが、最近表題の話を突っ込まれたのでメモしておきます。

これを解決する方法としては、


  1. 回数をカウントし、2回目はキャンセルする

  2. ブラウザのユーザーエージェントを見て判定する

といった方法が考えられるでしょうか。


1. 回数をカウントし、2回目はキャンセルする

        //クリックした時

$('#pagetop').on('click',function(){
var flag = false;
$('body,html').animate({ scrollTop: 0 }, 800, function() {
if(flag) {
flag = false; //次回クリック時に実行されるするようにフラグを降ろす
$.easing.easeInOutCirc();
} else {
flag = true; //フラグ立てるだけでスクロールの処理はしない
}
});
return false;
});

こんな感じ。ちなみにjQuery.easingの実体は$.easing以下らしいので$.easing.easeInOutCirc()で呼び出せるとのこと。


2. ブラウザのユーザーエージェントを見て判定する

ブラウザのユーザーエージェントや機能で、htmlbodyかどっちを使うかを判定させる方法。

    //判定用の関数

function scrollElm() {
if('scrollingElement' in document) {
return document.scrollingElement;
}
if(navigator.userAgent.indexOf('WebKit') != -1) {
return document.body;
}
return document.documentElement;
}

$(function(){
var targetElm = scrollElm();
//クリックした時
$('#pagetop').on('click',function(){
$(targetElm).animate({scrollTop: 0},800,'easeInOutCirc');
return false;
});
});

こんな感じ。


参考