ScrollTop really jerky in Chrome

Question

I\'m using the scrollTop function to create a parallax scrolling website, binding the scrollTop function to different anchors throughout my website.

The problem I\'m hav

Answer 1

Instead of doing your fade function on .scroll(), which is fired every time the page scrolls a tiny bit, do it on the .animate() callback, which is only triggered once when the scrolling is complete.

$('.recipes').click(function(){
     var startY = $('#container').position().top + $('#container').outerHeight();
     $('html,body').animate(
          { scrollTop: $(".main1").offset().top },
          1500,
          function() {
             checkY(startY);
          } 
     );
});

$('.cooking').click(function(){
     var startY = $('#container').position().top + $('#container').outerHeight();
     $('html,body').animate(
         { scrollTop: $(".main2").offset().top },
         1500,
         function(){
             checkY(startY);
         }
     );
});

And the OP's original checkY() function:

function checkY(i) {
    if( $(window).scrollTop() > i ) {
        $('#backToTop, #navigation').fadeIn(600);
    } else {
        $('#backToTop, #navigation').fadeOut(600);
    }
}