ScrollTop在Chrome中真的很生涩

我正在使用scrollTop函数创建一个视差滚动网站，将scrollTop函数绑定到整个网站的不同锚点。

我遇到的问题是，Chrome中的滚动变得非常不稳定/不稳定，但在Firefox中它很好。

我的代码如下：

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

有可能有另一种方法来做到这一点，所以网站滚动不是生涩吗？ 也许我可以添加一个缓和function？

• 编辑-

如果我删除了以下function，那么生涩似乎消失了，代码是否有问题，或者可能采用不同的方式编写代码？

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

第二次编辑

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

Answer 1

如果您对使用插件的替代方法持开放态度，那么当我使用它时， jQuery scrollTo一直非常流畅。

这会让你这样做

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

Answer 2

而不是在每次页面滚动一点点时触发的.scroll()上执行淡入淡出function，而是在.animate()回调上执行此操作，该回调仅在滚动完成时触发一次。

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

和OP的原始checkY()函数：

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