Nav Links Scroll to Sections

[Watson (Tony McEvoy)]

Hi,
I’m trying to use a nav link to scroll to a section on a single page site. But every time I try this the action just jumps to the section rather than scrolling as in the various tutorials I’ve found?
Anybody got any ideas

https://preview.webflow.com/preview/bythefountain-2022?utm_medium=preview_link&utm_source=designer&utm_content=bythefountain-2022&preview=99b2329a6d71b4bc1f46068f609f0a22&pageId=614c68a41df1e0fcb21ea2c3&workflow=preview

---

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

[imtiazraqib]

Hey @Watson , I have seen this as a common issue and I made a post in addressing this. Check it out and I hope it helps.

A guide on using a Fixed Navbar with a 100vh Section anchor

Hello Hello Webflow Fam , Over the past few weeks, I have been noticing a lot of forum questions regarding anchor links on a 100vh Section incorporated with the Webflow Navbar element and setting its position to Fixed. Apparently, on anchor-scrolling, it causes a skip which can be seen below: [screen-capture] At least for me, it does not occur when I create my own Fixed Navbar but occurs when you use Webflow’s Navigation Element and switch it to fixed. However, there is a workaround wh…

[Watson (Tony McEvoy)]

Hi,
New link for test site:
https://preview.webflow.com/preview/side-nav-test-c60ef5?utm_medium=preview_link&utm_source=designer&utm_content=side-nav-test-c60ef5&preview=818dcdee10c963a533891ca94fbcde1c&workflow=preview.

Tried imtiazraqib but got exactly the same effect ( doesn’t scroll but jumps instantly to section)?

[imtiazraqib]

Hey @Watson , you seem to have missed this altogether:

@imtiazraqib

Now we do a little math

• Figure out the height of your navbar, in my case, it is 60px .
• Now, set the height of your anchor div to 60px
• Also, set a margin-top on your anchor div of 60px OR add the offset with your absolute positioning

Your designer should have a preview as such:

• Repeat this for all your desired sections

[Watson (Tony McEvoy)]

Hi imtiazraqib,

The link I shared was most basic Test 1, not with your method.
Below is with your method.

https://preview.webflow.com/preview/side-nav-test-c60ef5-d160d16c81bec75fca?utm_medium=preview_link&utm_source=designer&utm_content=side-nav-test-c60ef5-d160d16c81bec75fca&preview=44ee182a13895fa221b0a04dfa3d8dde&workflow=preview

Both do not scroll as desired in Safari or Chrome on my M1 iMac running BigSur V11.6

But the really weird thing is they work when viewed on my iPad?