Streaming live at 10am (PST)

Page Scroll Animation on Tab Link Click

#1

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


#2

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:

#3

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

#4

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?

#5

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.

#6

In that case, my first comment is exactly what you should do to solve that.
here it is:

#7

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.

#8

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