Insights
Oct 17, 2025
Adding a Scroll-to-Top Button in Framer
Adding a 'Scroll to Top' button in Framer can enhance user experience when navigating long pages. You can easily implement this by adding the button, setting up the scroll section, and connecting the button.

Uploaded by

Translated by
Contents
Table of Contents
This document aims to help local users learning Framer who face difficulties due to the lack of Korean resources by translating official blog content into Korean and adding practical information. We hope it provides some assistance to those using Framer.
The role of the scroll-to-top button
When users are navigating through a long page, they often need to return to the top. In such cases, providing a ‘scroll-to-top’ button can enhance the experience on your website.
1. Adding the button
First, place the icon or button layer where you want it. (In this example, we used a button fixed to the lower right corner of the screen.)
Select the button and choose
Fixed
in thePosition
settingsSimilarly, select the location you want to fix it in the Position settings
(In this example, we specifiedBottom
andRight
values to fix it at the bottom right of the screen.)

2. Creating the scroll section
Now, set the target point for the button to move to.
Select the navigation bar (top section of the page)
Click the
+
icon next toScroll Section
in the right panel and name the section
(In this example, the section was named #nev.)

3. Linking the button
Now set the button to connect with the scroll section.
Select the button
Click the
+
icon next toLink
in the right panelChoose the page and the section you created earlier to complete the connection.

Conclusion
For a hands-on example, we recommend practicing by Remixing this project.
If you encounter any issues, please contact us via the Framer Support Page for further assistance.
This article is a translated and adapted version of the Framer blog post ‘How to add a scroll-to-top button to your website’.