Scroll Issues with Anchor Links in Navigation - Landing Page

Website: https://spacewalkwithus.squarespace.com/

Password: 1111

Description:

I am trying to create a scrolling landing page effect on my Squarespace website’s homepage. The desired functionality is that when a user clicks on a navigation item (e.g., "Mission"), the page smoothly scrolls to the corresponding section on the homepage.

Here is what I have done so far:

1. Custom IDs for Sections: I assigned unique IDs to each section of the homepage.
2. Navigation Links: I then linked each navigation item in the main menu to these section IDs using code blocks.

Current Behavior:

• Chrome (Desktop): Everything works perfectly. Clicking on a navigation link smoothly scrolls to the correct section, aligning the section title at the top of the viewport.
• Mobile Browsers (e.g., Chrome on Android/iOS): The page scrolls to the section, but the section is not aligned correctly. It jumps slightly below the intended section, not centered as expected.
• Safari (Desktop/Mobile): Similar issue as mobile browsers: the scroll effect does not bring the section header to the top of the viewport but stops slightly below it.

Goal:

I want to fix this issue so that when a user clicks on a navigation link, the page scrolls exactly to the top of the corresponding section across all browsers (including mobile) and devices. The section header should be aligned at the top of the viewport, providing a consistent user experience.

Possible Solutions Explored:

• I’ve read that targeting section IDs directly might solve this issue, but when I tried retrieving section IDs using ID finder and linking the navigation directly to these IDs, the navigation links didn’t work at all—they failed to scroll to the targeted sections.

Help Needed:

1. Fixing the Scroll Position: How can I ensure that the scroll position is accurate across all devices and browsers?
2. Using Section IDs: If the issue is related to how I’m targeting the IDs, could someone provide a step-by-step guide on how to correctly target section IDs and update the navigation links accordingly? I attempted this but couldn't get it to work.

I appreciate any guidance or solutions that the community can offer to resolve this issue. Thank you!

Try this suggestion