scroll animation trigger complete handler twice

Question

This scroll animation trigger the complete handler twice..

$('html,body').stop().animate({
    scrollTop : 100
}, {
    duration : 600,
    complete : function(){
        console.log('scroll complete');
    }
});

If you remove either html or body in the selector the scroll animation loose its cross browser support...

Answer 1

The animation is triggered on both elements, firing the complete handler for both elements.

You can use a promise to avoid it

$('html,body').stop()
              .animate({scrollTop : 100}, 600)
              .promise()
              .done(function() {
                  console.log('scroll complete');
              });