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 like "contact" to the target section.
- Set the "Contact" button’s link type to Page Section and select #contact; Webflow handles smooth scrolling automatically.
To make your "Contact" button scroll to a specific div named "Contact" in Webflow, you need to use an in-page link with a corresponding ID element.
1. Add a Unique ID to the Target Section
- Select the div or section you want to scroll to (in your case, the "Contact" section).
- In the right-hand Element Settings Panel, find the ID field.
- Enter a unique ID like contact (no spaces or special characters).
2. Link the Button to the Section
- Select the "Contact" button in the Designer.
- In the Element Settings Panel, under Link Settings, choose Page Section.
- From the dropdown list, select the #contact ID you just created.
3. Verify Smooth Scrolling Behavior
- Webflow automatically includes smooth scrolling for internal page links, so no extra configuration is required.
4. For Navbar Menus or Symbols
- If the Contact button is inside a Navbar or used across multiple pages:
- Ensure the section ID is present specifically on that page.
- Linking to /#contact from another page will navigate to the home page and scroll down to the "contact" section if it's on that page.
Summary
Assign an ID of "contact" to the target section, then set the button's link type to Page Section and point it to #contact. Webflow will handle the scrolling automatically.