fadeTo breaks smooth scroll

Question

I'm using this snippet I found online to smooth scroll:

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

It works just fine but it breaks when it comes across an image that is fading in. I have some images set to fadeTo from opacity 0 to 1 and when the scroll animation comes across those images it stops dead in it's tracks. In other words, the smooth scroll always stops at my first div because there are images fading in that stop the scroll so the scroll animation never takes the user to their desired destination.

How can I remedy this?

Answer 1

The janky-ness you're seeing is due to the extra rendering required to update the opacity of the images during the scroll, versus the scroll alone.

I'd suggest your best bet would be to disable the fade whilst the scroll is occurring.

To do this you could either set opacity to 1 for all images before calling animate() , or to prevent the fade from occurring until after the animation is complete, however the method to do this would depend on the code/framework used for the image fade.