How can I create a link button in Webflow that takes the user directly to a specific section on the homepage instead of just the top of the page?
TL;DR
- Assign a unique ID to the target section (e.g., "pricing") in the Settings panel.
- Link the button to that section using the Page Section link type or manually with /#pricing, then publish and test for smooth scrolling.
To create a link button in Webflow that directs users to a specific section on the homepage, you need to use an HTML ID and anchor link. Here’s how to do it step by step:
1. Add an ID to the Target Section
- Select the section or element you want to scroll to (on your homepage).
- In the Settings panel (D key), find the Element ID field.
- Enter a short, unique ID—for example: "pricing" (without quotes).
2. Create or Select the Link Button
- Choose the button or link element (such as a text link or button).
- In the Element Settings panel, under Link settings, set the Link type to Page Section.
3. Link to the Section
- Make sure the page dropdown is set to the homepage (or blank if staying on the same page).
- In the Section dropdown (which appears after selecting the page), choose the ID you assigned. Webflow will automatically detect elements with assigned IDs.
- If you're linking manually (e.g., from a nav menu or custom link), enter your target like /#[sectionID] — for example: /#pricing.
4. Test the Link Behavior
- Publish your site and click the button to see if it scrolls smoothly to the section.
- If it jumps instead of scrolling, ensure "Smooth Scroll" is enabled in Page Settings (it is by default in most Webflow templates).
Summary
To link a button to a specific homepage section, assign an ID to the section (e.g., “pricing”), then link your button to /#pricing using Page Section linking. This creates a smooth-scroll button to that part of the page.
