Anchor navigation scrolls to wrong position

Some themes use an anchor navigation that would not load a new page once a navigational link gets clicked; instead it would scroll down to a specific section on the same page. That type of navigation is popular on certain types of landing pages (“one-pager”).

Scroll targets missed

  • LazyLoad is enabled in WP Rocket.
  • Click on any navigational link that is supposed to scroll to a target further down the page (outside of the viewport).
  • Automatic scroll ends at a wrong position, the scroll target is missed.

Solution: disable LazyLoad

The solution to fix the scrolling behaviour is to disable LazyLoad, at least on any page with scrolling navigation.
 Disabling LazyLoad on Specific Posts

Why does it happen?

Scroll targets are calculated upon page load by the browser. Once the page has fully loaded, the browser “knows” the position of every scroll target, so it can scroll to that exact position once you click a menu link.

However, with LazyLoad enabled, images outside of the initial viewport don’t get loaded directly. So the positions of elements that the browser has calculated upon page load are skewed.

Once you start scrolling, lazy-loaded images start to appear, adding to the document’s overall height, and those elements your browser “knew” the positions of before get pushed further down the page.