How can anchor links be created in Webflow without altering the site address when clicked on?
- Assign a unique ID to the target section in Webflow.
- Add custom JavaScript in the footer using
scrollIntoView()andhistory.replaceState()to enable smooth scrolling without changing the URL. - Set each link's type to URL with
#idformat and add adata-smooth-scrollattribute to trigger the custom script.
To create anchor links in Webflow that scroll to a section without altering the site address (i.e., without showing a “#section-id” in the URL), follow these steps.
1. Add an Anchor Target to the Section
- Select the section or element you want to scroll to.
- In the Element Settings panel, go to "ID" and assign a unique ID (example:
about). - This ID is traditionally used with
#about, but we won’t link it this way in the next step.
2. Use Custom JavaScript for Smooth Scrolling Without Updating URL
- Webflow’s default anchor link behavior adds the
#idto the browser’s URL. To prevent this, use custom JavaScript to override the behavior. - Go to Project Settings > Custom Code > Footer Code, and paste the following:
```javascript
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll('[data-smooth-scroll]').forEach(function (link) {
link.addEventListener("click", function (e) {
e.preventDefault();
const targetId = link.getAttribute("href").replace("#", "");
const targetElement = document.getElementById(targetId);
if (targetElement) {
targetElement.scrollIntoView({ behavior: "smooth" });
history.replaceState(null, null, ' ');
}
});
});
});
</script>
```
3. Set Up Your Anchor Links
- For each anchor link (e.g., in a navbar or button), set the Link Type to URL instead of "Section".
- In the URL field, use
#about(or your section ID). - Add a custom attribute to the link element:
- Name:
data-smooth-scroll - Value: (leave empty)
This setup allows the link to scroll smoothly without updating the URL.
Summary
To create anchor links in Webflow that do not change the browser URL, assign an ID to the target section, use JavaScript with scrollIntoView() and custom attributes like data-smooth-scroll. This handles smooth scrolling while suppressing the URL fragment (#id).