JavaScript
jQuery
scroll
scrollTop

$(‘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;
    });
});

こんな感じ。

参考