等到一个事件发生后再进行下一个事件

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 方法将回调作为其最终参数。这个回调在动画结束后被调用。见http://api.jquery.com/animate/。

所以在锚点点击动画将开始。完成后会改变window.location.hash（原插件代码）

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

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

最后它将绑定一个事件处理程序到窗口滚动。通过 在 动画之后对其进行投标，我们确保它不会在动画期间触发。

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

当点击另一个链接时，整个过程会重复。