클릭시 화면의 최상단으로 이동하는 코드이다.
behavior = auto , smooth
behavior는 두가지로 나뉘는데 auto = 위치로 바로 데려다 주고 smooth는 부드럽게 끌어올린다.
export default function TopBtn() {
const handleClick = () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
};
return (
<button type='button' onClick={handleClick} className='topBtn'></button>
);
}
https://velog.io/@jahommer/React-Top%EB%B2%84%ED%8A%BC-scroll-to-top%EB%A7%8C%EB%93%A4%EA%B8%B0
React - Top버튼 (scroll to top)만들기
탑 버튼을 만들기 전에 구글링으로 검색하여 여러 방법들을 봤었는데 내가 생각했던 javascript 코드와는 살짝 달랐었다.어떤 사람은 hook을 만들었고 또 어떤 사람은 내가 생각했던 javascript 방식과
velog.io
'React' 카테고리의 다른 글
| [React] className 중복 적용(Error Class)할 때 간편한 방법 (0) | 2023.04.07 |
|---|---|
| [React] react-scroll 라이브러리를 이용한 클릭시 스크롤 이동 구현 (0) | 2023.04.04 |
| [React] Youtube 영상 넣기 (0) | 2023.04.03 |
| [React] map 배열 중 일부분만 만들기 (0) | 2023.04.02 |
| [React] Swiper Tab 클릭 시 슬라이드 처음으로 이동하기 (0) | 2023.03.30 |
