ScrollToTop

@hua-labs/ui

v1.1.0

스크롤 후 표시되는 플로팅 버튼으로, 페이지 상단으로 부드럽게 스크롤합니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { ScrollToTop } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

변형 미리보기

이 페이지를 스크롤하면 우측 하단에 ScrollToTop 버튼이 나타납니다.

defaultprimaryoutline

크기

Props

이름	타입	기본값	설명
`threshold`	`number`	`400`	버튼이 표시되기 위한 스크롤 거리 (px)
`smooth`	`boolean`	`true`	부드러운 스크롤 애니메이션 활성화
`variant`	`"default" \| "primary" \| "secondary" \| "outline" \| "ghost"`	`"default"`	버튼 스타일 변형
`size`	`"sm" \| "md" \| "lg"`	`"md"`	버튼 크기
`icon`	`IconName`	`"arrowUp"`	표시할 아이콘
`showOnMount`	`boolean`	`false`	마운트 시 즉시 버튼 표시

코드 예시

docs:common.basicUsagetsx

1import { ScrollToTop } from '@hua-labs/ui';
2 
3// Add to your layout or page
4<ScrollToTop />

docs:components.scrollToTop.examples.variantstsx

1// Default (glass morphism)
2<ScrollToTop variant="default" />
3 
4// Primary (blue)
5<ScrollToTop variant="primary" />
6 
7// Outline
8<ScrollToTop variant="outline" />
9 
10// Ghost
11<ScrollToTop variant="ghost" />

docs:components.scrollToTop.examples.customtsx

1<ScrollToTop
2  threshold={500}      // Show after 500px scroll
3  variant="primary"
4  size="lg"
5  smooth={true}
6/>

docs:components.scrollToTop.examples.positiontsx

1// Bottom right (default)
2<ScrollToTop className="bottom-6 right-6" />
3 
4// Bottom left
5<ScrollToTop className="bottom-6 left-6" />
6 
7// Bottom center
8<ScrollToTop className="bottom-6 left-1/2 -translate-x-1/2" />

사용 팁

• 모든 페이지에 표시하려면 최외곽 레이아웃 컴포넌트 안에 배치하세요
• threshold prop으로 버튼이 나타나는 스크롤 위치를 조절하세요 (기본값: 300px)
• className으로 위치를 조정할 수 있습니다 (기본: 우측 하단)

접근성

•:
•:
•키보드: 키보드 접근 가능 (Enter/Space로 활성화)

LanguageToggle ScrollArea