Is there a way to make the scroll page smooth in Webflow?
TL;DR
- Enable smooth scroll by adding a script in Webflow’s Footer Code section under Project Settings and publishing the site.
- Webflow auto-applies smooth scroll to in-page anchor links set via “Page Section” linking.
- Use custom JavaScript for advanced scroll effects like custom duration or easing.
Yes, you can enable smooth scroll behavior in Webflow with a built-in setting designed for in-page linking.
1. Enable Smooth Scrolling in Webflow
Go to Project Settings in your Webflow dashboard.
Click on the “Custom Code” tab.
Scroll down to the “Footer Code” section.
Paste this short script before the closing
</body>tag:<script>document.documentElement.style.scrollBehavior = 'smooth';</script>Publish your project to see the effect live. (This feature does not apply in preview mode.)
2. Enable Smooth Anchor Link Scrolling (Native Option)
- Webflow includes automatic smooth scrolling for in-page anchor links.
- When you link a button, text, or nav link to a section using
#section-id, Webflow creates smooth scroll behavior by default. - To use this:
- Give your section a unique ID (e.g.,
hero). - Set a link interaction (e.g., button or nav link) to point to
#herounder Page Section in the link settings.
3. Custom Scroll Tweaks (Advanced)
- Custom scroll duration or easing is not natively editable in Webflow.
- For control over scroll duration or easing, you would need custom JavaScript, such as using libraries like Lenis or GSAP ScrollTo, which require embedding in the site’s custom code.
Summary
Webflow supports smooth scrolling natively for in-page links, and you can globally enforce it by adding a simple script in the footer. For more advanced effects, custom JavaScript is needed.