Is there a way to make the scroll page smooth in Webflow?
TL;DR
- Enable “Smooth scroll” in the page settings under the Options section of the desired page.
- Use anchor links that match the ID of target sections (e.g.,
#about-section). - Optionally add custom JS in Project Settings for enhanced scroll behavior.
- Avoid overflow settings like
hiddenorscrollon parent elements that may interfere with scrolling.
You can make a scrolling experience smooth in Webflow using built-in features and custom settings.
1. Enable Smooth Scroll in Page Settings
- Go to Pages panel in the Webflow Designer.
- Click on the gear icon next to the page you want to edit.
- Scroll to the “Options” section.
- Check the box for “Smooth scroll” (this enables smooth scrolling for anchor links on the page).
2. Use Anchor Links Correctly
- Use a link block or button and set its link to a section ID (e.g.,
#about-section). - Make sure the target section has a matching ID value (e.g.,
about-section).
3. Add Smooth Scrolling for All Pages (Optional Custom Code)
- If you want additional control or smoother easing effects, you can add a small JS snippet:
- Go to Project Settings > Custom Code > Footer section.
- Paste this code:
window.scroll({top: targetOffset, behavior: "smooth"}); (Used within your own scrolling logic)
- Note: This is for advanced custom behavior. For standard anchor links, Webflow’s built-in option is sufficient.
4. Avoid Conflicts with Overflow Settings
- Ensure no parent elements (like sections or containers) have overflow: hidden or overflow: scroll if those settings interfere with native scrolling behavior.
Summary
Enable “Smooth scroll” in your page settings to create smooth anchor transitions in Webflow. For advanced cases, custom JS scroll logic can enhance the behavior, but isn’t usually required.