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

Adding a scroll-to-top button to your website can help visitors navigate more easily.

In Framer, you can add a scroll-to-top button by combining a button with scroll sections.

To create a navigation bar with relative, absolute, or sticky positioning and a functional scroll-to-top button, follow these steps:

Add your icon to the desired position. In this demo, we will place the button fixed at the bottom, pinned to the bottom right.

Select your navigation bar. In the right-side panel, click the + icon next to “Scroll Section” at the bottom right, and name the section.

After creating the scroll section, select your scroll-to-top button. Click + next to the Link on the right-side bar. Select the page where you are inserting the button, and choose the section you named in the previous step.

To create a navigation bar with fixed positioning and a functional scroll-to-top button, follow these steps:

Add your icon in the desired position. In this demo, we'll place the button fixed at the bottom, pinned to the bottom right.

Select the top element that follows your navigation bar, which in this case is the "Header Image." In the right-side panel, click the + icon next to "Scroll Section" at the bottom right, and name the section.

After creating the scroll section, select your scroll-to-top button and click + next to the Link on the right-side bar. Choose the page where you are inserting the button and select the section you named in the previous step.

For a hands-on example and to see how to set up this project, you can remix it here.

If you have followed the steps above and are still experiencing issues, please create a support ticket in the Framer Community.