프로젝트로 배운 공부/개인 프로젝트
올라가기 버튼 구현하는 방법
콛 다이어리
2024. 11. 10. 00:34
6살이었나?
스크롤을 내리다가
우측 하단에 화살표가 있길래
무심코 눌렀는데
브라우저 맨 위로 쑤욱 올라가는게
너무 신기했다.
스크롤을 쭉 내리고 버튼을 누르는 것만
몇 번을 했는지 모른다.
그 때는 '개발자' 라는 직업을 몰랐기에
우측 하단에 있는 화살표 버튼을 누르면
맨 위로 올라가게 해주는
컴퓨터랑 나만의 약속인 줄 알았다.
오늘 티켓링크 개인 프로젝트 하면서
그 때 그 기억이 갑자기 생각이 나기도 했고
사용자 측면에서도 그 기능이 있으면
좋을 것 같기도 해서
(스크롤이 있어도 스크롤을 올리는 것 보다
버튼을 누르는 게 더 편하다고 생각한다.)
만들어 보았다.
window.scrollTo 를 사용하면 된다.
// 상단으로 올라가게 해주는 함수
const GoToTop = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};
// 올라가기 버튼 감싸는 div
const ScrollUpBtnDiv = styled.div`
text-align: right;
`;
// 올라가기 버튼
const ScrollUpBtn = styled.button`
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
&:hover {
box-shadow: inset 1.5px 1.5px gray;
}
`;
<ScrollUpBtnDiv>
<div
style={{
height: "70px",
position: "fixed",
bottom: "2%",
right: "3%",
}}
>
<ScrollUpBtn onClick={GoToTop}>
<FontAwesomeIcon icon={faArrowUp} size="xl" />
</ScrollUpBtn>
</div>
</ScrollUpBtnDiv>
);