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.
@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.
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!
@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!
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.
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!
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!