等待，直到发生一个事件，然后再移动到下一个

Question

我目前有一个滚动锚点动画，它还向被点击的锚点添加了一个“活动”类。我试图将下面的函数也纳入到工作中，所以说有人点击“锚点1”，“锚点1”会得到一个活动类，窗口将滚动到该位置。但是，在发生这种情况后，用户手动开始向下滚动页面，我希望删除活动类。我现在遇到的问题是，当发生点击锚点的滚动动画时，下面的函数会发生。只有当窗口从点击的锚点滚动时，我怎样才能禁用它？

$(window).scroll(function() { 
    $('a[href^=#]').removeClass('active'); 
}); 

这是我正在使用的滚动锚脚本。

/******* 

    *** Anchor Slider by Cedric Dugas *** 
    *** Http://www.position-absolute.com *** 

    Never have an anchor jumping your content, slide it. 

    Don't forget to put an id to your anchor ! 
    You can use and modify this script for any project you want, but please leave this comment as credit. 

*****/ 

jQuery.fn.anchorAnimate = function(settings) { 

    settings = jQuery.extend({ 
     speed : 500 
    }, settings); 

    return this.each(function(){ 
     var caller = this 
     $(caller).click(function (event) { 
      event.preventDefault() 
      var locationHref = window.location.href 
      var elementClick = $(caller).attr("href") 

      var destination = $(elementClick).offset().top; 
      $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, 'easeOutCubic', function() { 
       window.location.hash = elementClick 
      }); 
      return false; 
     }) 
    }) 
} 

最后，我的jQuery

// Scrolling Anchors 

$('[href^=#]').anchorAnimate(); 

// Active Class For Clicked Anchors 

var anchorscroll = $('a[href^=#]') 

anchorscroll.click(function(){ 
var anchorlocation = $(this).attr("href"); 
    anchorscroll.removeClass('active'); 
    $(this).addClass('active'); 
    $('a[href='+anchorlocation+']').addClass('active'); 
}); 

Answer 1

尝试改变插件像这样（添加的行标）：

jQuery.fn.anchorAnimate = function (settings) { 

    settings = jQuery.extend({ 
     speed: 500 
    }, settings); 

    var scrollFn = function() { // added 
     $('[href^=#]').removeClass('active'); 
     $(window).unbind('scroll', scrollFn); 
    } 

    return this.each(function() { 
     var caller = this 
     $(caller).click(function (event) { 
      event.preventDefault() 
      var locationHref = window.location.href 
      var elementClick = $(caller).attr("href") 

      var destination = $(elementClick).offset().top; 
      $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination }, settings.speed, 'easeOutCubic', function() { 
       window.location.hash = elementClick 
       $('[href^=#]').removeClass('active'); // added 
       $('[href^=' + elementClick + ']').addClass('active'); // added 
       $(window).scroll(scrollFn); // added 
      }); 
      return false; 
     }) 
    }) 
} 
$(document).ready(function() { 
    $('[href^=#]').anchorAnimate(); 
}); 

编辑： 说明：

动画方法需要回调作为其最终参数。此动画在动画完成后称为。见http://api.jquery.com/animate/。

所以在主播点击动画就会开始。当它结束时，它会改变window.location.hash（原始插件代码）

然后它会从指向这个文档的所有链接中删除“活动”类（对于用户点击链接而不滚动的情况）。

则反而会加重“活动”类的锚该用户刚刚点击

最后它会绑定一个事件处理窗口滚动。通过之后动画，我们确保它在动画期间不会触发。

现在，当用户使用鼠标或键滚动时，我们的事件处理程序被触发。我们从所有链接中移除活动类并解除绑定处理程序，以便在用户单击另一个链接之前不会再次调用它。

单击另一个链接时，重复整个过程。