Scroll sections with anchor links to top of viewport instead bottom of header

[Daryl_Shaw]

Hi, I refer to

How to scroll 100vh fullscreen sections exactly to the top of viewport (below header) with anchor links?

I have a page with several sections, each set to 100vh fullscreen height. There is a sticky header with a semi-transparent background above it on the top. As soon as I move back and forth between the sections with anchor links, the sections will only be scrolled to the lower edge of the header. As a result, the lower end of the section above shines through under the semi-transparent header and a strip of the current section with height of header is out of viewport at the bottom. How can I ensur…

and

Page anchors - scroll to top of window rather than bottom of header

Hi I’ve got a page with a sticky transparent header. I’ve got anchored 100vh sections and I’m trying to get the anchors to scroll to the top of the page so the section covers the entire page but they are scrolling up to the bottom of the header instead. Is there a way to make the anchors scroll to the top of the window instead?

It is still very complicated to ensure that sections with anchor links are not scrolled to the bottom edge of the (transparent) header but to the top edge of the screen.
How can I achieve this without having to cheat the scrolling with positive margins at the top and negative margins at the bottom of each section?
Could you get an option here to set where anchor links scroll: to the top of the viewport or to the bottom of the header?

[ruenel]

Hey @Daryl_Shaw,

Please provide the updated WP details so I can log in and check your site again. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[ruenel]

Hey Daryl,

Could you get an option here to set where anchor links scroll: to the top of the viewport or to the bottom of the header?

Regretfully there isn’t an option for this one. By default, the theme’s behavior will treat the Section always below the header. There isn’t also a way for the function to figure out whether you are using a transparent header or with a solid color.

Hope this makes sense.