Anchor links in single page website in mobile version jump to wrong sections

Site URL: http://pardalis.co.uk

Hi all, 

I'm creating a one page website for a client and have put anchor links in corresponding sections of the site for easier jumping to sections. Originally I used ID blocks via a Squarespace extension, but later switched to anchor links.

However, when visiting the site in mobile version, when clicking the link in the navigation bar, the jump is way off below the actual placement of the link, at the very bottom of the section.

I'm using the 7.1. version, and see this is a common problem.

Is there a solution?
 

Try this tutorial, very helpful:

https://www.will-myers.com/articles/perfect-anchor-links-in-squarespace

What SQSP extension were you using? Given Fluid Engine, it's really easy to have a code block in the top corner and hidden behind other blocks, but it's a feature I would love to be able see to add custom IDs to section.

Thank you for your response!

The original extension I used was Squarespace ID finder for Chrome. However later I switched to anchor links as they're the standard. 

I've watched the video and the smooth scrolling option was helpful and worked.

However, when trying to apply the scroll margin and header option, again it worked great in desktop, but in the mobile version it put the actual anchor link in the bottom of the section where it should have been on top.