Smooth Scroll to Anchor tag stops much above the anchor tag

Question

I am trying to get smooth scrolling functionality on my website. Currently this is the problem I am facing. When I redirect to another page with an anchor tag in the URL reference, the scrolling stops much before the anchor tag, if the tag is preceded by an image.

For example:

try going from home -> About Us # Theory of Change. This works as intended. Now suppose I move from home -> About Us # Our Team you will notice a slight offset. This is a lot more pronounced, if you were to try and go from home -> Our Work # Pilot Study the page would stop almost, 300 - 400 px above the section where the anchor tag is contained. The scrolling works just fine to those places if done withing the page itself i.e., from About Us -> #Our Team you will see the scrolling work just fine.

URL to website

Answer 1

Your code seems to be executing on domready. I suspect the issue is caused by images not being fully loaded when the smooth scroll code is executed.

I suggest trying to trigger the smooth scroll code on load, instead of on domready.