fadeTo打破平滑滚动

Question

我使用此片段在网上找到了平滑滚动：

    $( "a[href*='#']" ).on( "click", function( event ) {
    event.preventDefault();
    var href = event.target.href; 
    href = href.slice( href.indexOf( "#" ), href.length );
    $( "body" ).animate( {
       scrollTop: $( href ).get( 0 ).offsetTop
    }, 1000 );
    } );

它工作得很好，但是当它遇到正在淡入的图像时它会中断。我有一些图像设置为从不透明度0到1的淡入淡出，当滚动动画遇到这些图像时，它会停止在其中。的轨道。换句话说，平滑滚动总是停在我的第一个div，因为有图像淡入，停止滚动，所以滚动动画永远不会将用户带到他们想要的目的地。

我该如何解决这个问题？

Answer 1

您所看到的笨拙是由于在滚动期间更新图像的不透明度所需的额外渲染，而不仅仅是滚动。

我建议你最好的选择是在滚动发生时禁用淡入淡出。

要执行此操作，您可以在调用animate()之前为所有图像设置不透明度为1，或者在动画完成之前防止淡入淡出，但是执行此操作的方法将取决于代码/用于图像淡化的框架。