How can I create a smooth scroll in Webflow when the navbar is fixed?

Published on
September 22, 2023

To create a smooth scroll effect in Webflow when the navbar is fixed, follow these steps:

  1. Add a section to your page that will serve as the target for the smooth scroll effect. This section will typically be below the navbar.
  2. Give the section a unique ID. To do this, select the section, go to the Settings panel on the right side of the Editor, and under the "ID" field, enter a name for the ID. For example, you can enter "target-section" as the ID.
  3. Select the navbar element on your page. In the Settings panel, click on the "Add Field" button to add a new field.
  4. Set the field type to "Link". In the Link field, enter the ID name that you set for the target section. In this case, enter "#target-section" without the quotes.
  5. With the navbar element still selected, go to the Interactions panel on the right side of the Editor and click on the "+" button to create a new interaction.
  6. Choose the trigger for the interaction. In this case, choose the "Mouse Click" trigger.
  7. Next, add an action to the interaction. Click on the "+" button under "ACTIONS" and choose "Page Scroll" from the list of available actions.
  8. In the "Offset" field, enter a value to adjust the scroll position. This value will determine how far below the target section the page will scroll. For example, if you want the page to scroll to the top of the target section, you can enter "0" as the offset.
  9. Set the duration for the scroll animation by adjusting the "Time" field. A value of 1000 milliseconds (1 second) is a good starting point for a smooth scroll effect.
  10. Finally, click outside of the Interactions panel to save your changes.

With these steps, you have created a smooth scroll effect for your fixed navbar in Webflow. When clicking on a link within the navbar, the page will scroll smoothly to the target section.