본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

scroll-to-top 버튼의 역할

사용자가 긴 페이지를 탐색하다 보면, 다시 맨 위로 돌아가야 할 때가 많습니다. 이런 경우 일일이 스크롤을 올리는 대신 ‘scroll-to-top(스크롤하여 맨 위로 가기)’ 버튼을 제공하면 웹사이트에서의 경험을 개선할 수 있어요.

1. 버튼 추가하기

먼저 아이콘이나 버튼 레이어를 원하는 위치에 배치합니다. (이 예시에서는 화면 하단 오른쪽에 고정된 버튼을 사용했어요)

• 버튼을 선택한 후 Position 설정에서 Fixed를 선택하기

• 동일하게 Position 설정에서 고정하고자 하는 위치를 선택하기
  (이 예시에서는 Bottom과 Right 값을 지정해 화면의 오른쪽 하단에 고정했어요)

2. 스크롤 섹션 만들기

이제 버튼이 이동할 목표 지점을 설정해줍니다.

• 내비게이션 바(페이지 상단 영역)를 선택하기

• 오른쪽 패널에서 Scroll Section 옆의 + 아이콘을 클릭하고 섹션의 이름을 지정하기
  (이 예시에서는 섹션의 이름을 #nev로 지정했어요)

3. 버튼 연결하기

이제 버튼이 스크롤 섹션과 연결되도록 설정합니다.

• 해당 버튼을 선택하기

• 오른쪽 패널에서 Link 옆의 + 아이콘을 클릭하기

• 페이지와 앞서 만든 섹션을 선택하면 연결이 완료됩니다.

마무리

직접적인 예로, 이 프로젝트를 Remix 해보며 연습해보시길 추천드립니다.

문제가 발생할 경우, 추가적인 지원을 받으려면 Framer 지원 페이지를 통해 문의해 주세요 .

본 글은 Framer 공식 블로그의 ‘How to add a scroll-to-top button to your website’을 번역·각색한 콘텐츠입니다.