Hi there,
I’ve seen this post quite a bit but can’t seem to fix the problem. My first CTA (See How It Works) does not scroll to the intended anchor link on mobile on the first click. Once the entire site is viewed, the CTA scrolls correctly to the proper anchor link. This is only occuring on mobile. All images have been changed from lazy load to eager.
Any advice is appreciated!
Here is my site Read-Only: LINK
([how to share your site Read-Only link][2])
Generally means you have images that are set to lazy load.
On the first visit, they aren’t available so the browser guesses the scroll-to location.
On the second visit they’re cached, and part of the calc.
Correct, however, I believe I’ve fixed all the images set to lazy load…
Think like a browser… what is it seeing during the page load when it tries to calculate the #hash position?
Lazy load images without sizes are one cause, another can be interactions or preloaders. Anything that’s causing the position of your #hash to change after the HTML initially loads.
If you have to, the way to trace it is process of elimination - clone the page, and then just keep stripping things out until the hash navigation works properly. It’s a bit arduous but effective.