Navigation Scroll Issues with custom ID blocks

I wanted to create a scrolling landing page effect on the home page: when you click “nav” it scrolls to the specific section. For that, I created custom IDs for each section, then connected nav to those section code blocks. Issues: It works great on Chrome but on Safari & mobile when I click on nav it jumps below the section, not at the beginning.

See here: https://spacewalkwithus.squarespace.com

Inspo website: https://www.spacewalkwithus.com/ (the one I am transferring to Squarespace)

Password:1111

How to make it this way: you click on the nav link at it jumps to the beginning of the section.

Really appreciate your help! Thank you in advance

Try using div tag with ID instead of a tag with name

so your code is

<a name="home"></a>

you can change it to

<div id="home"></div>