Is there a way to make the scroll page smooth in Webflow?
TL;DR
- Enable "Smooth Scroll" in your Webflow project's Custom Code settings and publish the site.
- Assign unique IDs to target sections and link to them using anchor links for native smooth scrolling without custom code.
Yes, Webflow allows you to enable smooth scrolling for on-page anchor link navigation using a built-in setting.
1. Enable Smooth Scroll in Site Settings
- Go to Site Settings in your Webflow project dashboard.
- Click on the "Settings" (gear icon) next to your project name.
- Navigate to the “Custom Code” tab.
- Scroll down to the section labeled “Advanced settings”.
- Enable the toggle for “Enable Smooth Scroll”.
- Save changes and publish your site.
2. Use Anchor Links Properly
- To make smooth scroll work, use anchor links that reference element IDs (e.g.,
#about,#features). - Assign a unique ID to the target section (e.g., select a section and name it
aboutin the Element Settings panel under “ID”). - Link buttons, nav items, or text links to this ID by setting the link to a Section.
3. Avoid Custom Code Unless Necessary
- Webflow’s smooth scroll feature works natively and applies to all anchor links.
- You do not need any custom JavaScript or third-party libraries like jQuery to make this happen.
Summary
To make your Webflow site scroll smoothly when clicking anchor links, enable "Smooth Scroll" in your Project Settings under the Custom Code tab, and be sure to use properly linked anchor IDs on your page.