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

有一个名为scrollTo的jQuery插件提供此功能（以及其他功能）。我建议使用这个插件（查看onAfter回调配置）或检查它的来源。

jQuery：滚动窗口然后addClass（） - 如何回调

3 个答案: