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]

 

[Th3M8dH8tt3r]

Really need to see it in action and how it's interacting to be able to offer advice. How hard would it be for you to move the HTML, CSS and jQuery into a codepen.io or jsfiddle? Then we can see it working

 

[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

 

[GravyMonster]

Yup, need to see it working (in a JSFiddle ideally)to solve it, although .stop(true) should work in theory.

Also, I notice you're using 'jQuery' instead of '$' - I assume that's for compatibility? If so, you can put the jQuery code in a closure and alias the $ so you can use it without breaking any other scripts:

(function($) {
    // your code here with jQuery available via $...
})(jQuery);

 

[Th3M8dH8tt3r]

I'm not that awesome with jQuery but, I know what I can do with it, just i need to look it up after.

What I'm thinking is that you need to only run the script if the button is NOT animated and NOT visible so, a conditional surrounding the whole thing that says, ,

if $('.button').not(':animate') && $('.button').not(':visible') {

or something like that. Basically, I suck at jQuery but that's what I'm thinking. What it'll do is say that if the button isn't there to be seen or in the process of transition and the viewport condition is met, then run the transition code.

 

[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

 

[Th3M8dH8tt3r]

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

Yeah, have a look at what I wrote above. Put that conditional around the animation. It should sort it out and will stop the loop of the button completing animations.

I think it'll work. Just check up on the actual code. As I said, I'm not that hot on 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 .

 

[Th3M8dH8tt3r]

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 .

I was using button as an example and my code will need work. It's just a rough pointer in the sort of direction I'd go with it. Like I said, I'm not that good with jQuery but know what I need to research to do stuff.

 

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

 

[Th3M8dH8tt3r]

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

Sweet...was my input at all helpful? Be good to know, always wanting to improve my jQuery so knowing if my thoughts are useful does that.

 

[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

 

[Th3M8dH8tt3r]

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

Sounds like you followed the same sort of route I usually take with this sort of thing. Get somewhere close and then research research research. My jquery is poor in comparison to other languages. There's a lot to learn.

 

[Phunky]

What you really want to do is suppress the button from showing in the first place if user you notice another scroll event.

Get looking into setTimeouts or you could just use debounce but you won't learn much from it

So the idea is;

1. User scrolls to bottom of page
2. Trigger "show" function (via setTimeout or debounce)
3. If user scrolls again within set time limit show event is cancelled.
4. Rinse, repeat.

I'll let you have a go first before helping you further.

*Edit*

You could also use one of the many scrollspy type plugins which fire a custom event when you scroll pass the defined DOM element.

 

[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.

 

[Phunky]

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

It will implement it correctly, but ultimately no - so if your happy with it fading in-and-out when users scrolls back what you have is fine.

 

[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...