Prevent anchor links from scrolling behind a sticky header

Feature Requests
1

Scrolling to anchor with a fixed header now results in scrolling too far. It would be great if I could set a certain margin to prevent this from happening.

This can be done quite easily using the following CSS property: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header. However, this doesn’t seem to work and I suspect this is because you override the browser scroll functionality with your own javascript code.

If your function would provide support for this, my problem would be solved. I already have a CSS variable for the height of the header and I could add it to the HTML or to any section.

2

Hey @GM-Mike and welcome to the forum.

I am pretty sure there is no JS involved so nothing gets overwritten.
As your link isn’t working for me, I am not sure what you are on about in detail.
I expect it’s something like the scroll-padding-top property.

I just tested the behaviour with implementing this property and had no issues.
Everything is working as expected.
Do you have a live site where you can show your issue?

1 Like
3

Hey Marius, thanks for the quick reply!

Somehow it didn’t work before but I managed to get it working now.

For future reference: The article I tried to reference can be found at One line CSS solution to prevent anchor links from scrolling behind a sticky or fixed header