Jquery animation build up 'bug'

Levi

Moderator
Staff member
I've been working on my new site (yes finally I hear you all cry) and I thought I'd managed to get the jquery script(s) working how I wanted them but Sean pointed out I had an issue I hadn't spotted. Basically if you scroll up and down a lot the 'fade in menu' and the 'back to top button' flicker while it catches up with itself. You can see it here - ignore the lack of css, ugly text etc, it's literally barebones, getting all the scripts etc working before I style it.
Sean called the 'bug' animation build up so off I trundle to try and fix the issue.... results usually mentioned using .stop() or even using .dequeue() so when I've tried these they do kind of work but once I've stopped the 'fast scrolling' the script no longer loads up the button or menu again and requires a full page refresh for it to work again.
Can anyone either point me in the direction of more reading or point my original script (back to top button) in the right direction.
Thanks in advance
Code:
jQuery(document).ready(function() {    var offset = 500;    var duration = 500;    jQuery(window).scroll(function() {        if (jQuery(this).scrollTop() > offset) {            jQuery('.back-to-top').fadeIn(duration);        } else {            jQuery('.back-to-top').fadeOut(duration);        }    });        jQuery('.back-to-top').click(function(event) {        event.preventDefault();        jQuery('html, body').animate({scrollTop: 0}, duration);        return false;    })});
 
Think that's browser specific mate. I'm on Safari on iMac here and no flicker at all.
 
did you scroll up and down very fast (probably should have said that last night but it was late), it happens on all mine (safari, opera, ie, firefox)
 
Update: after a complete re-write/change of script I now have it working (I think lol). No idea if it's best practice but it works so that will do me, especially when it does what it's supposed to when I shrink the page, it responsively hides :).
Same link
Reference for others - .back-to-top is the class of the 'back to the top' button
Code:
    $(document).ready(function(){         $(window).scroll(function(){            if ($(this).stop().scrollTop() > 200) {                $('.back-to-top').fadeIn(500);            } else {                $('.back-to-top').stop().fadeOut(500);            }        });         $('.back-to-top').click(function(){            $("html, body").animate({ scrollTop: 0 }, 600);            return false;        });     });
 
Back
Top