Anchor link scroll with scroll destination section vertically offset

[roekudoo]

Dear Shopifiers,

After some trail and error we've managed to have some of the items in the main navigation menu link to a destination section down/up on the home page. We did this by adding the following under "Link" for the specific main navigation menu item: "https://domainname.com/#shopify-section-template--13454....." .

This works, but after the scrolling action the destionation section shows all the way on top of the page. However, we would prefer there to be some space above the destination section or have them vertically centered on the page.

To give a concrete example with pictures: we have in our main menu a menu item called "Over Ons". Currently, when the user clicks the item the destination section shows all the way up top after the scrolling action is completed (image 1). Instead, we would like there to be some space above the destination section (image 2) and ideally we would like the destination section to be vertically centered on the page.

Anyone knows how to do this? We're using the Kingdom theme for our website.

Thanks in advance,

Roekudoo

Image 1

Image 2

[ZenoPageBuilder]

Hello @roekudoo 

That is the default browser behavior, after scrolling it always scroll to the top of the target section. There is no way to change it.

There is a hack: You can set ID for a section ABOVE your target section, and scroll to it instead. It is the easiest way to do without any JavaScript.