How can anchor links be created in Webflow without altering the site address when clicked on?
TL;DR
- Assign a unique ID to the target section in the Settings panel.
- Add a button or link without setting an href, then use the Interactions panel to create a click-triggered Scroll To animation.
- Set scroll duration and easing for smooth behavior, ensuring the URL remains unchanged during navigation.
To create anchor links in Webflow that scroll to a section without changing the URL, follow these steps using smooth scroll interactions rather than default anchor behavior.
1. Use IDs to Mark Sections
- Select the section or element you want to scroll to.
- Go to the Settings panel (gear icon).
- In the Element Settings, set a unique ID in the "ID" field (e.g.,
about-section). - This ID will act as your scroll destination.
2. Create a Link Without an Anchor in the URL
- Add a Link Block or Button to your page.
- Instead of setting the link as
#about-section(which affects the URL), leave the Link field empty. - With the link selected, go to the Interactions panel (lightning icon).
3. Add a Scroll Interaction
- Click + Element Trigger → choose Mouse Click (Tap).
- Add a new animation: Start an Animation.
- Click + Timed Animation, name it (e.g., “Scroll to About”).
- Click + then choose Scroll to.
- From the canvas, choose the target element with the set ID.
- Set Duration, Easing, and make sure Smooth Scroll is applied.
- Save the animation.
4. Test for No URL Change
- Preview your project using the Webflow preview mode.
- When clicked, the page should scroll smoothly to the section without altering the URL in the browser.
Summary
To create anchor-like scroll behavior in Webflow without changing the URL, use Scroll animations in the Interactions panel instead of linking to #IDs. This approach allows smooth scrolling while keeping the address bar clean.