올라가기 버튼 구현하는 방법

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>

  );