ScrollTop really jerky in Chrome

问题:

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 having is that the scrolling becomes really choppy/jerky in Chrome, but somehow its fine in Firefox.

My code is as follows:

 $('.recipes').click(function(){
 $('html,body').animate({
 scrollTop: $(".main1").offset().top
 }, 1500);
 });

 $('.cooking').click(function(){
 $('html,body').animate({
 scrollTop: $(".main2").offset().top
 }, 1500);
 });

Is there possibly an alternate way to do this so the website scroll isn't as jerky? maybe an easing function I can add?

• EDIT-

If I remove the following function, the jerkyness seems to go away, is there something wrong with the code or possibly a different way to write it?

var startY = $('#container').position().top + $('#container').outerHeight();

$(window).scroll(function(){
checkY();
});

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

checkY();

SECOND EDIT

$(document).ready(function(){

$('.recipes').click(function(){
    $.scrollTo('.main1', 1500)
 });

$('.cooking').click(function(){
    $.scrollTo('.main2', 1500)
});

$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 600) {
            $('#backToTop, #navigation').show();
        } else {
            $('#backToTop, #navigation').hide();
        }
    });
    }); 

});

回答1:

If you are open to an alternative approach, using a plugin, jQuery scrollTo has always been very smooth when I have used it.

This would let you do

$('.recipes').click(function(){
    $.scrollTo('.main1', 1500);
});

回答2:

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