jQuery: Scroll the window then addClass() - how to callback

Question

Inside a jQuery event handler, I would like to scroll the window and then add a class to something. This is my code:

$('#foo').click(function() {       
    window.scrollTo(y);
    $('#bar').addClass('active');
});
$(window).scroll(function() {
    $('#bar').removeClass('active');
});

Notice I have another handler to remove that same class whenever the window is scrolled. The scrolling part works fine, but seems to run asynchronously, so removeClass() happens after addClass() but before the scrolling is finished. I don't know how to do this in plain javascript. I know there is a jQuery scrollTop() function that does the same thing (but seems to have cross-browser issues), but it doesn't accept a callback.

What I really need is a callback to add the class after the scrolling is finished. thanks!

Answer 1

There is a jQuery plugin called scrollTo that provides this capability (along with other features). I recommend using this plugin (check out the onAfter callback config) or check it's source.

Answer 2

You can also accomplish this with animate

$('#foo').click(function(){
  var count = 0;
  $('html,body').animate({scrollTop:0},1000,function(){
    count++;
    if (count == 2){
      if (!($('#bar').hasClass('active'))){
        $('.place').each(function(){
          if($(this).hasClass('active')){
            $(this).removeClass('active');
          }
          if($(this).attr('id') == 'bar'){
            $(this).addClass('active');
          }
        });
      }
    }
  });
});

EDIT:

give each possible place that you are "activating" a class. (e.g. 'place')

Then, the above code should work (edited)