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 a unique ID to the tab section on Page 2 and add a custom data attribute (e.g., data-tab-target="features") to each Tab Link.
On Page 2, include JavaScript to read the ?tab= parameter from the URL and trigger the corresponding tab.
On Page 1, set the button link to /page-2#sectionID?tab=target, replacing with your actual IDs and tab keywords.

To link a button on Page 1 to a specific tab inside a section on Page 2, you need to use a combination of unique tab IDs and URL hash linking. Webflow does not support this natively, so it requires a custom setup with URL hashes and a bit of JavaScript.

1. Assign an ID to the Section That Contains the Tabs

Select the parent section (or wrapper) that contains your Tab component on Page 2.
In the Element Settings panel, set a unique ID (e.g., #featuresSection).
This ensures the browser will scroll to this section when that ID is referenced in a link.

2. Give Each Tab a Unique Data Attribute

Select the specific Tab Link (e.g., "Pricing", "Features", etc.) inside the Tabs component.
In the Settings panel, confirm which tab index it is (starts at 0).
Assign a unique custom attribute under the Element settings:
Attribute Name: data-tab-target
Attribute Value: a meaningful keyword like pricing, features, etc.

3. Add Custom Script to Auto-Open a Tab from the URL

Go to Page 2, open Page Settings, and add this script in the Before </body> tag section:

(Do not include <script> tags in Webflow; paste the content directly inside the code block.)

Example JS:

This script reads the URL after ?tab=features and opens the corresponding tab.

```

document.addEventListener("DOMContentLoaded", function () {

const urlParams = new URLSearchParams(window.location.search);

const tabParam = urlParams.get("tab");

if (tabParam) {

const tabLinks = document.querySelectorAll('[data-tab-target]');

tabLinks.forEach(link => {

if (link.getAttribute('data-tab-target') === tabParam) {

link.click();

}

});

}

});

</script>

```

4. Link the Button on Page 1

Select the button on Page 1.
Under the Link Settings, choose URL and enter the following format:
/page-2#featuresSection?tab=features
Replace /page-2 with the actual slug of Page 2.
Replace #featuresSection with the section ID containing the tab component.
Replace features with the tab target value you assigned.

5. Test the Behavior

Publish your project.
When you click the button on Page 1, it will:
Navigate to Page 2
Automatically scroll to the tab section
Open the specified tab (e.g., "Features")

Summary

To link a button from Page 1 to a specific tab on Page 2, add a section ID, use URL parameters to indicate the tab, and apply custom JavaScript on Page 2 to trigger the correct tab on load. This allows a smooth scroll to the section and auto-selection of the desired tab.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer