Streaming live at 10am (PST)

How do I make 100vh Tab Links scroll down to 100vh Tab content?


#1

Hi there,

I’m trying to make a 100vh tab navigation section, that when you click a tab link it will scroll you down to the selected 100vh tab, is there any way to do this in webflow?

Thanks in advance,

Jamie


My public share link: https://preview.webflow.com/preview/b-m-testing?preview=4314d53d52c5cd3d68a53aec6c3e84e2


#2

Hi Jamie,

Tab links control the opened tab but it doesn’t scroll to the opened Tab pane.

Instead of using tabs you can do this with 3 link blocks (simulating the Tab links) and put the tab content into 3 divs using absolute positioning and z-index. You can then link to the correspondent section and control which div is visible with interactions.

Hope this helps.


#3

Thanks for your help, I’ve finally managed to do it, it’s a bit hacky with interactions and display settings but it works a treat!

I’ll post the link to the project incase anyone else needs help with this :grin:


Public share link: https://preview.webflow.com/preview/b-m-testing?preview=4314d53d52c5cd3d68a53aec6c3e84e2


#4

Looking great, glad it helped.

One more tip for usability purposes: When the user clicks in one tab loses the ability to navigate to the other 2 tabs unless he scrolls back up. This might not be intuitive for all users. I’d add a small secondary link to each tab to facilitate navigation (maybe previous / next links).

Just a suggestion :wink:


#5

Already made that change on the live site, just didn’t bother doing it on the test project lol, thanks for your suggestion :grin:


#6

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.