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

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();
});

编辑：说明：

Animate方法将callback作为其最终参数。此回调称为after动画完成。参见http://api.jquery.com/animate/。

因此，在锚点单击时将开始播放动画。完成后，它将更改window.location.hash（原始插件代码）

然后它将从指向该文档的所有链接中删除“活动”类（对于用户单击链接而无需在其中滚动的情况。）>

然后它将“活动”类添加到用户刚刚单击的锚点中>

最后，它将事件处理程序绑定到窗口滚动。通过出价after

动画，我们可以确保它在动画期间不会触发。

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

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