How can anchor links be created in Webflow without altering the site address when clicked on?
TL;DR
- Assign a unique ID to each section using the Element Settings panel.
- Create links using the "Page Section" option and select the corresponding ID as the anchor target.
- Webflow appends the
#section-idto the URL upon clicking without reloading the page; removing the hash requires custom JavaScript.
To create anchor links in Webflow without changing the full URL (or just appending the hash #), follow these steps using Webflow’s native linking and ID system.
1. Use Section IDs for Anchors
- Select the element (typically a Section) you want to scroll to.
- In the Element Settings panel, set a unique ID in the "ID" field (e.g.,
about,contact,features). - This ID becomes the anchor target (e.g.,
#about).
2. Point Links to the Anchor ID
- Add a Link element, like a Text Link, Button, or Nav Link.
- In the Link Settings, choose “Page Section”.
- Select the desired anchor target from the dropdown (these are auto-populated from the IDs you set).
3. Avoid Changing the Site Address
- Webflow automatically appends the hash fragment (
#about, etc.) to the URL when an anchor link is clicked. - However, the main domain or full path is not altered—only the fragment is added.
- Note: It is not possible to prevent the
#section-idfrom appearing in the address bar without custom JavaScript, but the base URL remains the same (no page reload occurs).
Summary
To create anchor links in Webflow, assign a unique ID to your section and use the Page Section linking option. The site address won’t change except for the addition of a #section-id fragment, which is standard browser behavior. Removing the fragment altogether requires custom JavaScript, which Webflow does not do by default.