Back Top

긴 콘텐츠를 스크롤한 뒤 페이지(또는 지정 영역) 맨 위로 빠르게 이동하는 플로팅 버튼입니다. target으로 스크롤 컨테이너를 지정하고, visibilityHeight으로 표시 임계값을 조절할 수 있습니다.

기본

data-back-top과 data-target으로 스크롤 영역을 연결합니다. 영역을 일정 이상 스크롤하면 우측 하단에 버튼이 나타납니다.

상품 상세 페이지입니다. 아래로 스크롤하면 맨 위로 버튼이 표시됩니다.

무선 이어폰 Pro — 노이즈 캔슬링 · 30시간 재생 · IPX4 방수

색상: 미드나이트 블랙 · 용량: 단품 · 배송: 내일 도착

상품 설명 — 40mm 드라이버와 적응형 EQ로 선명한 음질을 제공합니다.

리뷰 4.8점 (1,240건) · 무료 반품 30일 · A/S 1년 무상

함께 보면 좋은 상품: 충전 케이스 · 이어팁 세트 · 케이블

교환·반품 안내 — 미개봉 상품에 한해 7일 이내 신청 가능합니다.

문의: 고객센터 1588-0000 (평일 09:00–18:00)

표시 임계값

visibilityHeight으로 버튼이 나타나는 스크롤 거리(px)를 지정합니다. 기본값은 400px입니다.

공지사항 목록입니다. 200px 이상 스크롤하면 버튼이 표시됩니다.

[공지] 3월 정기 점검 안내 — 3/15(토) 02:00–06:00

[이벤트] 신규 가입 쿠폰 10% 할인 — 3/31까지

[업데이트] 앱 v2.4.0 배포 — 성능 개선 및 버그 수정

[안내] 배송 지연 지역 안내 — 강원·제주 일부 지역

[공지] 개인정보 처리방침 개정 — 4/1 시행

[이벤트] 봄맞이 세일 — 최대 50% 할인

[안내] 고객센터 운영 시간 변경 — 공휴일 휴무

크기

back_top_sm · back_top_lg 클래스로 버튼 크기를 조절합니다.

Small 크기 예시입니다. 스크롤해 보세요.

1. 소개 — 컴팩트한 플로팅 버튼이 필요한 좁은 레이아웃에 적합합니다.

2. 사양 — 모바일 사이드 패널·모달 내부 스크롤 영역에 활용합니다.

3. 참고 — 터치 영역은 최소 44px을 권장합니다.

4. 마무리 — 스크롤 후 맨 위로 이동할 수 있습니다.

Large 크기 예시입니다. 스크롤해 보세요.

1. 소개 — 눈에 잘 띄는 큰 버튼이 필요한 긴 문서·대시보드에 적합합니다.

2. 사양 — 태블릿·데스크톱 뷰에서 접근성을 높입니다.

3. 참고 — 아이콘만 사용할 때 aria-label을 반드시 지정합니다.

4. 마무리 — 스크롤 후 맨 위로 이동할 수 있습니다.

커스텀 콘텐츠

버튼 안에 아이콘과 텍스트를 함께 넣을 수 있습니다. pill 형태로 자동 확장됩니다.

긴 이용 약관 문서입니다. 스크롤 후 상단으로 돌아가세요.

제1조 (목적) — 본 약관은 서비스 이용 조건을 규정합니다.

제2조 (정의) — 회원, 콘텐츠, 유료 서비스 등의 용어를 정의합니다.

제3조 (약관의 효력) — 게시일로부터 효력이 발생합니다.

제4조 (회원 가입) — 가입 신청과 승인 절차를 안내합니다.

제5조 (회원 탈퇴) — 탈퇴 시 데이터 처리 방침을 따릅니다.

제6조 (서비스 제공) — 서비스 범위와 중단 사유를 명시합니다.

제7조 (책임 제한) — 불가항력 등 면책 사유를 규정합니다.

페이지 스크롤

target을 생략하면 window 스크롤을 기준으로 동작합니다. 이 페이지를 아래로 스크롤하면 우측 하단에 버튼이 나타납니다.

페이지를 충분히 스크롤한 뒤 우측 하단 플로팅 버튼을 확인하세요. 클릭하면 페이지 최상단으로 부드럽게 이동합니다.

API · Props

Prop	타입	기본값	설명
`target`	string	—	스크롤 컨테이너 선택자 (data-target). 생략 시 window
`visibilityHeight`	number \| string	400	버튼 표시 임계 스크롤(px, data-visibility-height)
`size`	'sm' \| 'md' \| 'lg'	md	back_top_sm · back_top_lg
`color`	'' \| 'primary' \| 'ghost'	—	back_top_primary · back_top_ghost
`label`	string	—	버튼 텍스트 (back_top_label)
`ariaLabel`	string	맨 위로	접근성 라벨
`interactive`	boolean	true	false면 data-back-top 미부여
`children`	ReactNode	—	버튼 콘텐츠 (아이콘·텍스트)
`className`	string	—	루트 요소 추가 클래스
`ripple`	boolean	true	클릭 파장(ripple). 닫기·트리거 버튼에 적용 · true 활성 · false 비활성

API · Children

Prop / Children	설명
`children`	버튼 콘텐츠 (아이콘·텍스트)

클래스 · 속성

React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.

클래스	설명
`back_top · back_top_btn · back_top_icon · back_top_label`	루트·버튼·아이콘·텍스트
`back_top_sm · back_top_lg · back_top_primary · back_top_ghost`	크기·색상
`is-visible`	스크롤 임계 초과 시 표시
`data-back-top · data-target · data-visibility-height`	JS 연동
`data-ripple`	클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용
`data-ripple="false"`	해당 요소 ripple 비활성
`data-no-ripple`	하위 전체 ripple 비활성

디자인 토큰

토큰	기본값	설명
`--back-top-size · --back-top-size-sm · --back-top-size-lg`	—	버튼 크기
`--back-top-offset-bottom · --back-top-offset-right`	—	플로팅 위치
`--back-top-z-index`	—	레이어 순서