jquery animation build up fix...

[lsg1r]

I've been working on my new site and I thought I'd managed to get the jquery script(s) working how I wanted them but I had an issue pointed out that I hadn't spotted.

On my site I've got a jquery waypoint that fades in a 'back to top button' when you scroll down the page. It works as intended but if you scroll up and down a lot really fast the 'back to top button' flickers while it catches up with itself.

I've got a live version online but it's on my business site so technically not allowed to add a link....

I understand the issue is called animation build up so off I trundled to google to try and fix the issue.... results usually mentioned using .stop() or even using .dequeue() but when I've tried adding 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, reintroducing the 'flicker bug'.
Can anyone either point me in the direction of more reading or show what I need to change on my original script (back to top button) which works but has the flickering.


Thanks in advance

Here's the script I'm using.

[LIST=1]
[*]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;
[*]    })
[*]});
[/LIST]

 

[lsg1r]

First off, thanks for taking the time to look

The page is still ugly as it's not styled and literally bare bones but it shows the issue with the back to top (and the slide down menu at the top but I should be able to fix that after this because it's based on the same script). If you scroll down and then scroll up really quickly it will keep flashing, it's being queued up.

Mods - please delete the link if this not acceptable, I will delete the link myself once issue has been fixed/no longer required

edit: link removed, jsfiddle lower down is the same though

 

[lsg1r]

Again thanks for looking... I'm new to this jsfiddle thing but hopefully this is what you need, I've stripped out some of the less important bits.
http://jsfiddle.net/KAQAK/1/

If I scroll it up and down really fast it does the same as the main site

As to the jquery instead of $. I'll look at that after I've fixed this issue, I'm still new to jquery

 

[lsg1r]

is .button the class I've used for the 'button'?

edit: not sure if that works, I've tried it but it didn't seem to want to work for me (tried .button class change too), the button completely disappeared. It's most likely down to my lack of jquery skills more than anything .

 

[lsg1r]

well looks like I've fixed it... completely changed the script but it doesn't seem to have the issue anymore
thanks for all the help

http://jsfiddle.net/LSG501/KAQAK/5/

    $(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;
        });
 
    });

 

[lsg1r]

was it helpful... kind of, couldn't get it to work directly using your suggestion so ended up using it as a google search query which led me to some other threads/questions which helped get my head round how to use .stop() in conjunction with fadeIn/fadeOut. Combined with the change of code I got it do what I wanted it to do, or close enough that I'm happy.

I've no idea if it's proper semantics etc but it works and hasn't broken the responsive elements I've added so that makes it good enough for me lol

 

[lsg1r]

Phunky, is that really go to change the outcome/effect of my relatively simple script that much?

I'm not really expecting people to be quickly scrolling up and down lots of times to cause the issue from the original post, it was more a case of stopping it from continuing to 'flash' after the fast scrolling was done.

 

[lsg1r]

Cool I'll leave it for now then, may come back at a later date and change it, but like I said I can't really see people scrolling up and down really quickly.

Most of the scripts I've found that do the same sort of thing haven't even bothered to try and remove the issue...