Read Time

0

min

Read Time

0

min

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.

Framer Logo for Blog Authors

Uploaded by

Profile of Blogger Kim Yejeong

Translated by

A blog thumbnail featuring a rocket-shaped 'scroll to top' button in Framer, detailing the design and setup process of this convenient feature for navigating long pages.
A blog thumbnail featuring a rocket-shaped 'scroll to top' button in Framer, detailing the design and setup process of this convenient feature for navigating long pages.
A blog thumbnail featuring a rocket-shaped 'scroll to top' button in Framer, detailing the design and setup process of this convenient feature for navigating long pages.

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 the Position settings

  • Similarly, select the location you want to fix it in the Position settings
    (In this example, we specified Bottom and Right values to fix it at the bottom right of the screen.)

Framer에서 scroll 버튼을 원하는 위치에 배치하여 특정 위치에 고정하는 방법에 대해 설명합니다.

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 to Scroll Section in the right panel and name the section
    (In this example, the section was named #nev.)

Framer에서 스크롤 섹션을 만들어 버튼이 이동할 목표 지점을 설정하는 방법에 대해 설명합니다.

3. Linking the button

Now set the button to connect with the scroll section.

  • Select the button

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

  • Choose the page and the section you created earlier to complete the connection.

Framer에서 스크롤 버튼과 이동할 섹션을 연결하는 방법에 대해 설명합니다.

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’.

Share Blog

Share Blog

Become a
Framer Expert

Any expert capable of Framer outsourcing can apply.
We connect experts and clients directly, with no intermediary fees.

Become a
Framer Expert

Any expert capable of Framer outsourcing can apply.
We connect experts and clients directly, with no intermediary fees.

Become a
Framer Expert

If you are an expert available for Framer freelance work,
anyone can apply.
No intermediary fees, we directly connect
experts and clients.