Navigation bar - change page and scroll to section

Design help Animations & Interactions
1

Hi Folks,
I need help with linking and automatic scroll of my navbar.

What I try to achieve is to change page when clicked for example on “contact” and scroll to that specific section. Right now it is jumping to that without a scroll. But i would like the process to be.

  1. Click on contact
  2. Load contact page
  3. scroll to contact form section

Right now it is like

  1. click on contact
  2. Contact form section appears.

Is there a built in feature for that or do I have to use custom code?

Thanks!

Here is my public share link: LINK
(how to access public share link)

2

Like this

/ - root (Relative url)
contact - page slug
#section-name - section name (Add #id to contact section).

URL example:
/contact#section-name

image

Link to this page:
image
& this section (Inside contact page):
image

Related:

1 Like
3

THanks, i already used that. My issue is focusing on adding a smooth animation. I don´t want the section to appear immediately. What you describe I did achieve with the flow mentioned in the first post.

Your mentioned flow.

  1. click on contact
  2. Contact form section appears.

My desired flow

  1. Click on contact
  2. Load contact page
  3. scroll to contact form section

Do you understand what I mean?

4

Only by JS.

Modern Browsers detect the hash in the url and then automatically open that part. So, if you want to scroll smoothly to that part instead, you first need to reset the scroll position to 0 and then add smooth scrolling. (Full answer below)

You should know a little JS to solve this.

5

Thank you for your fast reply! So there is no webflow solution for this. I will see if I can get that code working.

6

Did you get it to work? looking to achieve this aswell. Surprised 4 years later there still is no smooth scroll and only teleport links. Very bad view for onepagers…