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.
Navigation bar with relative, absolute, or sticky positioning
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.
![](https://framerusercontent.com/images/eSQB3nq4RgPA2RLvECkQGUcr4.png)
Select your navigation bar. In the right-side panel, click the + icon next to “Scroll Section” at the bottom right, and name the section.
![](https://framerusercontent.com/images/VDyA32gvdcjmdwX96tIfntiK0b8.png)
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.
![](https://framerusercontent.com/images/2lzeBzFw19DsZnMGyJOd7oI0.png)
Navigation bar with fixed positioning
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.
![](https://framerusercontent.com/images/eSQB3nq4RgPA2RLvECkQGUcr4.png)
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.
![](https://framerusercontent.com/images/hoDffarXLYRHgrKyJYZFySyUN8.png)
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.
![](https://framerusercontent.com/images/xBW76l2bdSpYTeqYdmJ7M4BfjsM.png)
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.