Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Jquery animation build up 'bug'

Discussion in 'Website Coding & Programming Forum:' started by Levi, Aug 22, 2013.

  1. Levi

    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;    })});
     
  2. Tony Hardy

    Tony Hardy Guest

    Think that's browser specific mate. I'm on Safari on iMac here and no flicker at all.
     
  3. Levi

    Levi Moderator Staff Member

    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)
     
  4. Levi

    Levi Moderator Staff Member

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

Share This Page