jquery - Jquery animate scrollTop 不平滑（Parralax 效果）

Question

我被要求创建一个网站，并且动画需要与链接http://www.piperdesign.co.uk/clients/sanctum/demo2/sanctum_HEX.html上显示的相同

我已经做了很多，但问题是动画不够流畅。

这是我已经创建动画的链接http://rapidzdev.co.uk/sanctum/

下面的代码是我已经完成的。

$('#main-menu ul li').on('click','a',function(e){
   e.preventDefault();
   var link = $(this).attr('href');
   var title = $(this).html().replace(' ','-').toLowerCase();
   var scroll = $('#'+title).offset().top;
   $('body').stop().animate({'scrollTop':scroll},'slow', 'easeOutCirc');
   return false;
})

任何帮助将非常感激。

谢谢

Answer 1

试试这个并更新你的jquery。

$('body').stop().animate({'scrollTop':scroll}, 600);

Answer 2

要获得更流畅的动画，请不要使用 jQuery。你正在为一个大图像和一个昂贵的属性设置动画：背景位置。

您应该尝试这样做以使事情更顺利：

• 使用 CSS 动画或 requestTimeFrame 而不是 jQuery
• 动画顶部或翻译适当性而不是背景位置
• 通过使您的图像元素绝对定位来最小化回流