I am currently facing a challenge with my scroll to top button not functioning properly. It seems like there is an issue arising from another animation that I can't seem to pinpoint. Specifically, when the other animation is triggered at "scroll hits 500", the scroll to top button fails to fade out and disappear as expected.
$.chain = function() {
var promise = $.Deferred().resolve().promise();
jQuery.each( arguments, function() {
promise = promise.pipe( this );
});
return promise;
};
function getScrollTop(){
if(typeof pageYOffset!= 'undefined'){
return pageYOffset;
}
else{
var body = document.body; //IE 'quirks'
var docElement = document.documentElement; //IE with doctype
docElement = (docElement.clientHeight)? docElement : body;
return docElement.scrollTop;
}
}
$(window).on("scroll", function(){
if(getScrollTop() >= 600){
$(window).off("scroll");
var animations = $.chain(function() {
return $('#animate1 img').fadeIn('slow').delay(400);
}, function() {
return $('#animate2 img').fadeIn('slow').delay(400);
}, function() {
return $('#animate3 img').fadeIn('slow');
});
};
});
jQuery(document).ready(function() {
var offset = 300;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.scroll-top').fadeIn(duration);
} else {
jQuery('.scroll-top').fadeOut(duration);
}
});
});
Your assistance in resolving this issue would be greatly appreciated. Thank you.