Developers

Search

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're still experiencing issues, please reach out to us through our contact page for further help.

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're still experiencing issues, please reach out to us through our contact page for further help.

FAQ

  • How do I add a scroll-to-top button to my Framer website?

    To add a scroll-to-top button, first place your icon in the desired position—such as fixed at the bottom right. Then, select your navigation bar and, in the right panel, click the + icon next to Scroll Section to create and name a section. Next, select the scroll-to-top button, click the + next to Link in the right panel, and choose the page and section you named. This will link the button to the top of your page.

  • How can I position my scroll-to-top button so it stays visible while scrolling?

    You can fix your button's position by placing your icon in the desired spot and setting it to fixed at the bottom, pinned to the bottom right. This ensures the button remains visible as users scroll through your website.

  • Where can I find an example project or get further help if I have issues?

    For a hands-on example, you can remix the provided project at https://framer.com/projects/new?duplicate=czHwvRVB8nBMhArsG79w. If you're still experiencing issues, please reach out through the Framer contact page for further help.

Updated

Related articles

How to play a video when it comes into view

How to update components

Overflow: Clip

Sharing Components