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（原始插件代码）

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

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

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

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

单击其他链接时，将重复整个过程。

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

1 个答案: