Eu estou usando a função scrollTop para criar um site de rolagem paralaxe, ligando a função scrollTop para diferentes âncoras em todo o meu site.

O problema que estou tendo é que a rolagem se torna realmente instável / irregular no Chrome, mas de alguma forma é bom no Firefox.

Meu código é o seguinte:

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

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

Existe possivelmente uma maneira alternativa de fazer isso para que o rolo do site não seja tão irregular? talvez uma função de atenuação eu posso adicionar?

EDITAR-

Se eu remover a seguinte função, a irregularidade parece desaparecer, há algo errado com o código ou possivelmente uma maneira diferente de escrevê-lo?

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

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

});