How can I make the page scroll down to a specific div named "Contact" when the "Contact" button is clicked on my website using Webflow?
TL;DR
- Assign a unique ID (e.g., "contact") to the Contact section using the Element Settings panel.
- Set the “Contact” button to link via Page Section to that ID (e.g., #contact), then publish and test the scroll behavior.
To make a "Contact" button scroll to a specific div on your Webflow website, you'll need to use Webflow’s built-in Page Section Linking feature with IDs.
1. Assign an ID to the Target Section
- Select the Contact section/div on the canvas.
- In the Element Settings panel (D key), find the ID field.
- Enter a unique ID like contact (lowercase, no spaces).
2. Link the Button to the Section
- Select the Contact button in your navigation or elsewhere.
- In the Element Settings panel, choose Page Section under the Link Settings.
- From the dropdown that appears, select #contact—this will appear if the ID was added successfully.
- If you're linking from a Navbar dropdown or mobile menu, be sure you’re editing the correct button within the navigation symbol.
3. Publish and Test
- Publish your site to see the scroll effect live.
- Click the “Contact” button to verify that it scrolls smoothly to the "Contact" section.
Summary
Set an ID on the "Contact" section, and use a Page Section link on the “Contact” button referencing that ID (e.g., #contact) to enable smooth scrolling behavior in Webflow.