Ich verwende die scrollTop-Funktion, um eine Parallaxen-Scrolling-Website zu erstellen und die scrollTop-Funktion an verschiedene Anker auf meiner Website zu binden.

Das Problem, das ich habe, ist, dass das Scrollen in Chrome sehr ruckelig wird, aber in Firefox irgendwie in Ordnung ist.

Mein Code lautet wie folgt:

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

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

Gibt es möglicherweise eine alternative Möglichkeit, dies zu tun, damit der Bildlauf auf der Website nicht so ruckelt? Vielleicht eine Lockerungsfunktion, die ich hinzufügen kann?

BEARBEITEN-

Wenn ich die folgende Funktion entferne, scheint das Ruckeln zu verschwinden. Stimmt etwas mit dem Code nicht oder kann es anders geschrieben werden?

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

ZWEITE BEARBEITUNG

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

});