使用jQuery ScrollTop动画在Chrome中出现奇怪的首次滚动延迟

Question

我正在使用的其中一个项目（ http://dev.sreejesh.in/wpissue/ ）在Chrome中出现一个奇怪的滚动问题。

在Google Chrome浏览器中，首次单击链接（“项目”）时，页面滚动会延迟1秒。 滚动一次后，问题将永远不会再次出现，直到重新加载页面。 在Firefox中，它可以完美运行。

我使用以下代码

的HTML

<li class="fleft" style="opacity: 1;">
    <a href="javascript:void(0);" class="theprojects inpagelink">The Projects</a>
</li>

jQuery的

$('.theprojects').click(function(){
    $("html, body").animate({ scrollTop: $("#main").offset().top }, 1000);
});

转到此处-http://dev.sreejesh.in/wpissue/并单击“项目”或“关于我们”链接，您将在chrome中看到该问题。

*操作系统= Windows 10 | Chrome版本= 46.0.2490.86

请帮忙

Answer 1

如果您知道y / scrollTop位置值，请直接使用它，不要从DOM中读取它。 测量东西很昂贵。

$('.theprojects').click(function(){
  var scrollTop = 600;
  $("html, body").animate({ scrollTop: scrollTop }, 1000);
});

考虑使用平滑的element.scrollTo() API而不是jQuery。 也许回退到jquery，或者根本不使用旧版浏览器制作动画。

还：图像太大。 一个超过3mb。 这些应按比例缩小和压缩。

Answer 2

最终，威尔逊·佩奇（Wilson Page）的建议解决了这个问题。 这是页面中未优化的图像导致的问题。 优化图像后，滚动无需在脚本中进行任何更改即可在Chrome中顺利运行。