JQuery: прокрутите окно, затем addClass () - как сделать обратный вызов

Question

Внутри обработчика событий jQuery я хотел бы прокрутить окно и , а затем добавить класс к чему-либо. Это мой код:

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

Обратите внимание, у меня есть другой обработчик для удаления того же класса при прокрутке окна. Часть прокрутки работает нормально, но, кажется, работает асинхронно, поэтому removeClass() происходит после addClass(), но до завершения прокрутки. Я не знаю, как сделать это в простом JavaScript. Я знаю, что есть функция jQuery scrollTop(), которая делает то же самое (но, похоже, имеет проблемы с браузером), но не принимает обратный вызов.

Что мне действительно нужно, так это обратный вызов для добавления класса после прокрутка закончена. спасибо!

Answer 1

Вы также можете сделать это с помощью 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');
          }
        });
      }
    }
  });
});

РЕДАКТИРОВАТЬ:

укажите каждое возможное место, где вы «активируете» класс.(например, «место»)

Тогда приведенный выше код должен работать (отредактировано)

Answer 2

Это позволит прокрутить браузер до вершины, для этого потребуется 1000 миллисекунд, а затем добавить класс с именем "scrolled-top" в тег BODY.

$('#foo').click(function(){
    // Scroll window to top, taking 1000ms
    $(window).animate({
            // Animate these properties.
            scrollTop : 0
        },1000, function() {
            // Animation complete callback.
            $('body').addClass('scrolled-top');
    });
}

Если вы собираетесь это сделать, вы, вероятно, также захотите добавить класс, если пользователь вручную прокрутил до самого верха, а также удалить класс "scrolled-top" при прокрутке вниз. Если это так, то это будет полная функция:

// On page load, add class as window will start at the top
$('body').addClass('scrolled-top');

// Add class to body when window is scrolled to top
$(window).scroll(function () {
    var scrollAmount = $(window).scrollTop();
    if(scrollAmount > 0) {
        $('body').removeClass('scrolled-top');
    } else {
        $('body').addClass('scrolled-top');
    }
}

// Scroll window to top, taking 1000ms
$('#foo').click(function(){
    $(window).animate({
        // Animate these properties.
        scrollTop : 0
    },1000);
}

Обратите внимание, что с полной функцией вам даже не нужен обратный вызов.

Answer 3

Существует плагин jQuery под названием scrollTo , который обеспечивает эту возможность (наряду с другими функциями). Я рекомендую использовать этот плагин (проверьте конфигурацию обратного вызова onAfter) или проверьте его источник.