Webflow sync, pageviews & more.
NEW

How can I link from a button on page 1 to a specific tab on page 2 in Webflow, which is located inside a section and needs to scroll down the page?

TL;DR
  • Assign an anchor ID to the Tabs section on Page 2 and unique ID or data-tab to the target Tab Link.
  • Link the Page 1 button using /page-2#section-id?tab=2, and add custom JavaScript on Page 2 to read the tab parameter and trigger the corresponding tab.

To link a button on Page 1 to a specific tab on Page 2, and automatically scroll to the tab section, you’ll use URL parameters and anchor links combined with custom interaction triggers in Webflow.

1. Assign an Anchor ID to the Tabs Section on Page 2

  • On Page 2, select the Section that contains your Tabs component.
  • In the Element Settings (gear icon) panel, give that section a unique ID (e.g., #pricing-tabs).
  • This ID will allow the page to auto-scroll to that section when linked.
  • You’ll need to target the specific tab you want active.
  • Give the target Tab Link inside the Tabs component a custom ID like tab2-link, or the Tab Panel a tab2-panel-id, depending on how you want to trigger it.
  • For tabs, activating the Tab Link generally triggers the tab switch, so preferably give the Tab Link the ID.
  • On Page 1, select your Button.

  • Set the Link to the following format, combining the page path, anchor, and a custom parameter:
    /page-2#pricing-tabs?tab=2

  • #pricing-tabs is the section ID (for scrolling).

  • ?tab=2 is a custom query parameter you’ll use to trigger the correct tab.

4. Add Custom Code to Page 2 to Read URL Parameter

  • Go to Page Settings of Page 2.

  • In the Before tag custom code section, add a script that:

  • Checks the tab parameter in the URL.

  • Triggers a click on the corresponding Tab Link.

  • Example (remove any HTML tags):

    ```

    ```

  • Replace "${tabValue}" with the appropriate value matching the tab’s data-tab attribute (Webflow assigns these by default).

  • Make sure Tab Links have corresponding data-tab attributes.

5. Publish and Test

  • Publish your site to see the effect.
  • Clicking the button on Page 1 should:
  • Navigate to Page 2.
  • Auto-scroll to the Tabs section.
  • Auto-activate the specified tab.

Summary

Link a button from Page 1 to a specific tab on Page 2 by using an anchor ID and a URL parameter, then use custom code on Page 2 to trigger a tab switch via that parameter. This ensures proper scroll positioning and tab activation on page load.

Rate this answer

Other Webflow Questions