Waiting until one event has happened before moving onto the next.

Posted by jaasum on Stack Overflow See other posts from Stack Overflow or by jaasum
Published on 2010-05-30T07:30:45Z Indexed on 2010/05/30 7:32 UTC
Read the original article Hit count: 197

Filed under:

I currently have a scrolling anchor animation that also adds an "active" class to the anchor clicked. I am trying to fit the below function into the works as well, so say someone clicks "anchor 1", "anchor 1" will get an active class and the window will scroll to that location. But, after that has happened say the user manually begins scrolling down the page, I want the active class to be removed. The problem I am running up against now is that the below function will happen when the scrolling animation from a clicked anchor is taking place. How can I disable this only when the window is being scrolled from a clicked anchor?

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

Here is the scrolling anchor script I am working with.

/*******

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

And lastly, my 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');
});

© Stack Overflow or respective owner

Related posts about jQuery