Page Scroll to ID Offset not working right

I can’t really say for sure (without seeing your page) but what you describe sounds like the document/body length changing while you scroll down the page.

Do you have a sticky header? Does the offset work correctly (even on the first time) when you’ve already scrolled down the page?

I’d be able to provide more help if I could see you page. Can you post your site’s url?

Sure. Thanks for the prompt response.

the url is https://cysecon.com

I am using a sticky header.

the offset does not work correctly the first time (every time it is reloaded) whether i manually scroll down or not. after that it works just fine.

Regards
D

I just checked your page.

You seem to be using a lazy-load script on your images which affects elements position and page scrolling.
The issue you’re having comes from the fact that the images are loaded while the page is scrolling (due to the lazy-load script) and since some of these images do not have a fixed height, they extend the page/document length after they’re loaded.

So, when you click a link at the top the page starts scrolling to the target position, but by the time it arrives there, the target’s position has changed because other images have loaded above it.

This is a general problem with lazy-loading images and in-page anchors and affects all pages, meaning that the issue will remain with or without “Page scroll to id” plugin.

The only way to fix this is either by removing the lazy loading script or setting a fixed/correct height on your image placeholders (although this might affect layout responsiveness).

Hope this helps.

Thank you sir. That was very helpful information.

I will try to play around with Lazy load to see if I can make the two work together. Unfortunately cannot get rid of lazy load as it has been very efficient in improving my page load speed.

Hopefully there is way to make them co-exist.

Thanks
Regards
D