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