In-page links NOT to the top of the page

Design help Custom code
1

I have a page with in-page links. On the same page, the navbar is sticky, which means that every time you go to the ID, a piece of the text is hidden under the sticky navbar as the link goes to the top of the page.

I know this can be fixed with a custom attribute, but I only know of ‘data-scroll = mid’, which puts the text of the ID in the middle of the screen (which is already better than at the top below the navbar but still not what I want).

I have no understanding of programming so I don’t know what value to add to the custom attribute to enforce going to the top of the page + number of pixels height of the navbar. Can anyone help me?

On the example site, numbers 1, 2 and 4 go to the middle of the page (except that 4 can no longer be the middle because it is the bottom block of the page).

Number 3 goes to the top of the page and is partly hidden behind the navbar.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

There are a bunch of ways to deal with this.

Honestly it’s a bit tricky to get it consistent across browsers and across navigation methods ( in page webflow.js section scroll v. page hash url link )

1 Like
3

Hi Michael, thank you so much for your help, awesome tutorial!
It works perfectly :-)