I have a Tabs Section with content that must be scrolled down through on narrow viewports, I have added buttons and some custom code (from great tutorial here at the bottom of the Tab Pane so that navigation is possible after scrolling to the bottom of each pane. The problem I now face is that the tab link click doesn’t generate a scroll back to the top of the Tabs section. If anyone knows of a possible solution to creating the page scroll for the tab link?
Hi,
Thanks for the reply, the previous and next buttons open the previous or next tab, but don’t realign the page to the top of the tabs when clicked, there does not seem to be any possible way to add section links to the tab button? I thought I could possibly add an animation on click but that’s not possible either??
Im wondering does the webflow accordion have the scrolling animation inbuilt, would it be a better option??
When you click the tab link (the elements with the ‘w-tab-link’ class) you are already at the top of the tab section because that is where those buttons are. So, there is no need to scroll back up, right?
When you click the Previous & Next buttons (the elements with the class ‘tab-prev’ & ‘tab-next’) you want the page to scroll back up.
Yes, that is correct. But please note that the ‘tab-prev’ and ‘tab-next’ buttons trigger a click on the corresponding ‘w-tab-link’. So when the previous or next is clicked the corresponding tab will open and id like the page to scroll back to the top of the tab pane to reveal the contents of the next tab.
You sir are a legend, and I apologise that you needed to map the process out, I had it in my head that the scroll had to be added to the tab-link as that was effectively what the prev & next were clicking.
Thanks for your time and patience.
Hi all, in my case I’ve got a NEXT button which is part of the pagination. This is placed at the bottom of a collection of articles. You can see it here: Blog | Landbot
The next button is not a standard link (otherwise I would have used the very first solution indicated in this post) but a default NEXT button, and because of that I cannot add in a link block element in order to add in an interaction. This NEXT button settings are tab settings, therefore I cannot add in a link to section as I’d do if this was a normal link block. Either way, what I want to do is to 1)click on the NEXT button and then 2) take the user to down automatically to the “Latest Articles” title. Currently when I hit such button it does show the next batch of articles but it scrolls all the way up to the top of the page…
Do you know how to avoid showing funny URLs when loading the content of one of the different tabs.
I created a tab for a website it’s ok in the Desktop version. But in the mobile version, the tab links are vertical with some content, so when I click on a tab link it needs to scroll up the tab content.
How can I do the process? is there any solution for it?