Navigating Between Sections on a Long Page

Hi All,

I have a long page containing several sections and a subnav with links that anchor to each section. I also have a ‘previous’ and ‘next’ button which I’d like to use to navigate between each section. For example, if the user is currently on section 6 and clicked on the ‘previous’ button, the page would anchor to section 5. If the ‘next’ button is clicked, the page would anchor to section 7.

I haven’t been able to find a viable solution so any help would be greatly appreciated.

Here’s my read-only link: https://preview.webflow.com/preview/long-page-section-nav?utm_medium=preview_link&utm_source=dashboard&utm_content=long-page-section-nav&preview=bbf9eb34e818a6797a592569e6d7efa8&mode=preview

Thanks.

@jamesli - my first thought would be to create a scroll into view interaction that shows/hides different “wrapper-prev-next-nav” elements when the corresponding section is in the viewport. Make sure the interactions is linear at 0 seconds. Then change the links in each “wrapper-prev-next-nav” to link to the above and below section IDs.

Does this help? Let me know!

1 Like

Ah, yes. That’s clever. I like it! The only downside might be the maintenance involved each time a new section is created but I think this solution fits the immediate need of the project I’m working on. I’ll give this a try and let you know how it goes. Thanks!

1 Like

@jamesli Great, let me know how it goes!

@myonke - So your suggestion works great! One thing I did notice however is that in order for this interaction to work, the sections would need to be quite tall. The navigation starts getting a little wonky if more than one section appears in the initial view. Other than that, it’s pretty seamless. Thanks again!

Have a look: https://preview.webflow.com/preview/long-page-section-nav?utm_medium=preview_link&utm_source=dashboard&utm_content=long-page-section-nav&preview=ab2e117e2882bb6106e6202af94c149f&mode=preview

1 Like

I’m glad to hear it worked out! I wonder if you could play with the page scroll offsets and margins/padding to mitigate the page being confused which section it’s on.

image

I’m sure you’ve already thought of that, too. Just throwing it out there in case not!

Anyways, I will try and think of another way to solve this ,if any, over the next day or two. If I come up with anything, I will report back!

PS - love the clean/simple look of what you’ve built so far!

1 Like

Thanks for the kudos! Just a wireframe at the moment obviously but it’s getting there. Will definitely play with the scroll offsets. And no, I did not think of that so thanks for the reminder! If you think of any other solutions, let me know. But otherwise, this is great!

1 Like