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

[sarammog]

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?

[tristup]

Hi @sarammog,

Thanks for reaching out.
It is not very clear what exactly you are trying to achieve. There is the x-site or x-root id is mentioned for the wrapper elements which can be used to point for your case. So the link will be something like #x-site or #x-root.
If that does not works, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– Specific page where you have used the sections with link to the top
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[tristup]

Hi @sarammog,

If you go through the arrow in the first section, you can find a space between the icon and the end of that section. Which makes the icon behind the header. Whereas for other cases there is no gap between the icon and the end of the section which is the reason behind your issue.

I would suggest you add the padding only for the bottom for section or the inner row that contains the icon.

Hope it helps.
Thanks

[sarammog]

Sorry, I don’t think I’m explaining it well enough… At the bottom of each section there’s the round arrow icon which links to the anchor for the section below it. When you click on it, the page scrolls but stops scrolling when it hits the bottom of the header. I want it to stop scrolling when it hits the top of the window as in the pictures below:

All the sections have the arrow icon with a gap before the end of the section they are in. The sections are set to 100vh height, the rows inside the section are set to 90vh height and the navigation arrow icon sits below that in a second row. I’m not sure how you got your second screen grab.

Is there a way of doing this without turning off the sticky header?

[marc_a]

Hi @sarammog,

I am not still clear with the issue you are facing to. Would you mind sharing a video indicating and explaining your issues? In that way, we can help you narrow it down.

Thank you.

[sarammog]

Sorry, I really don’t know how to explain it any better than I already have…

When you click on the round arrow icons, I want it to scroll to the next section and have that section fill the entire window (like the right hand side of the picture above).

At the moment, it scrolls to the next section but stops at the bottom of the header (like the left hand side of the picture above) meaning the whole section is offset by the height of the header.

[tristup]

Hi @sarammog,

As I am able to understand what exactly you are trying to point out, is that the clicking by the down arrow is not scrolling up the full section and it still shows the arrow at the top of the page. I have created a Test page by duplicating the Home and added a margin to the bottom of each section except the last one, which solves the problem. Please find the test page URL in the secure note.

Hope it helps.
Thanks

[sarammog]

Thanks. We final got there! I see what you’ve done now and that’s doing what I want it to.

Thanks again.

[tristup]

Hi @sarammog,

Glad that we are able to help you.

Thanks