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

$(‘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. ブラウザのユーザーエージェントを見て判定する

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

//判定用の関数 
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; 
    }); 
}); 

こんな感じ。

参考

• jQueryのscrollTop()にhtmlかbodyどちらを指定すればよいのか？ | SPYWEB
• 【JS・jQuery】ページ内リンクのスムーススクロールのベスト（2017年9月現在）な実装を考える – 鼻ブログ
• jQuery Easing Plugin のイージング関数を直接利用する方法