How to add a scroll-to-top button to your website

How to add a scroll-to-top button in Framer to improve navigation on your website.

Navigation bar with relative, absolute, or sticky positioning

  1. Add your button:

    • Place your icon in the desired position. In this demo, the button is fixed at the bottom, pinned to the bottom right.

      Shows the Position options in the right menu.

2. Create a scroll section:

  • Select your navigation bar.

  • In the right panel, click the + icon next to Scroll Section and name the section.

  1. Link the button:

  • Select the scroll-to-top button.

  • Click the + next to Link in the right panel.

  • Choose the page and section you named in the previous step.

The + next to Link in the right panel.

Additional resources

For a hands-on example, you can remix this project.

If you experience issues, create a support ticket in the Framer Community.