Page Scroll Animation on Tab Link Click

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?

The tabs are on the Motel Page of the project

Here is my public share link: https://preview.webflow.com/preview/bay-hotel-motel?utm_source=bay-hotel-motel&preview=0dcbcb6404563bd79275bc72f21b6362


Hi @STFS,

If I understand correctly, you want the ‘Previous’ & ‘Next’ buttons to scroll up to the top of the tabs section. You can do that with anchor links:

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?? :frowning:

Im wondering does the webflow accordion have the scrolling animation inbuilt, would it be a better option??

I am not sure I understand you.

  1. 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?

  2. When you click the Previous & Next buttons (the elements with the class ‘tab-prev’ & ‘tab-next’) you want the page to scroll back up.

Is that correct?

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.

In that case, my first comment is exactly what you should do to solve that.
here it is:
https://www.useloom.com/share/9a8d9a97dc1e4287a96b81edfe8bc387

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.

:rofl:
You’re welcome
Happy to help :webflow_heart:

Shame that video is offline now. What was the solution?

The first comment solved the problem.

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

  1. 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…

  2. Do you know how to avoid showing funny URLs when loading the content of one of the different tabs.

Many thanks in advance.

Daniel

1 Like

The way I solved it was to wrap the button in a link block that scrolls this the top of the div

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?

Thanks in advance