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 the ID "Contact" to the target section using the Element Settings panel.
- Set the button link to the "Page section" and choose "Contact," or manually set the URL to #Contact.
To make a button scroll to a specific section (like a div with the ID "Contact") on your Webflow site, you can use Webflow’s built-in page anchor linking functionality.
1. Assign a Unique ID to the Target Section
- Select the section/div you want to scroll to (e.g., your "Contact" section).
- In the right panel under the Element Settings (the cogwheel icon), locate the ID field.
- Enter "Contact" (or another ID of your choice—just make sure it matches exactly, including case-sensitivity).
2. Set the Button Link to the Section
- Select the button that should trigger the scroll.
- In the right panel under Element Settings, go to the Link Settings.
- Choose "Page section".
- From the dropdown, select “Contact” (this will appear in the list if you've correctly assigned an ID to the section).
- If you're using a text link inside a navbar or other element, you can also manually add #Contact in the URL field using "URL" instead of "Page section".
3. Publish and Test the Scroll Animation
- Press Publish in top-right to push changes live.
- On your live site, click the "Contact" button—it should now smooth-scroll to the Contact section.
Webflow automatically handles smooth scrolling for internal anchor links within a project.
Summary
To scroll to a div named "Contact" when a button is clicked in Webflow, assign ID "Contact" to the target section and set the button’s link to "Page section > Contact" or manually enter #Contact.