Question

We are lazy loading several elements of our page.

However, at the top we have a call to action for the last element on the page (an iframe within ui tabs). The CTA does an animation using scrollTop.

In my click function

$('html,body').animate({scrollTop: $("#customerReviews").offset().top}, 700, "easeInOutSine");

The issue is that when the scroll is triggered, it also triggers the lazyload as items come into the viewport. So, the target comes into view and is then pushed out of view as items finish lazy loading above.

Any good methods to counteract this?

Answer 1

I would create an isAnimating boolean variable to track when you are animating the page.

Right before your animate call set isAnimating to true, and set it back to false in the animate callback.

I’m not sure how you are calling the lazy load, but you would have to some how set the condition to not run when isAnimating is set to true.

isAnimating = true;
$('html,body').animate({scrollTop: $("#customerReviews").offset().top}, 700, "easeInOutSine", function(){
      isAnimating = false;
});