문제 상황

최근 웹이나 앱을 보면 어느정도 스크롤이 진행되고 나서 하단에 맨 위로 가는 버튼이 생기는 것을 어렵지 않게 볼 수 있다.
50%의 확률로 보이는 것 같은데...이정도면 꼭 구현할 줄 알아야겠다!
어떻게 하면 이를 구현할 수 있을까?

필요한 것

기능을 구현하기 위해서 내가 알아야하는 것이 무엇일까?
1. 현재 스크롤의 위치 -> 어느정도 내려갔을 때부터 버튼이 보이는데, 그 "어느정도"를 파악하기 위함
2. 버튼을 토글시키기 위한 boolean 타입의 state -> 스크롤 위치에 따라 토글시키기 위함
3. 버튼 클릭 시 최상단으로 이동하는 함수
4. 스크롤 이벤트를 지켜보기 위한 addEventListner -> 이게 없으면 스크롤을 해도 감지를 못한다

생각보다 매우 간단하다! 코드를 살펴보자.

해결 방법

import { useEffect, useState } from "react";

function ToTheTop() {
  // 토글 여부를 결정하는 state 선언
  const [toggleBtn, setToggleBtn] = useState(true);

  // window 객체에서 scrollY 값을 받아옴
  // 어느정도 스크롤이 된건지 판단 후, 토글 여부 결정
  const handleScroll = () => {
    const { scrollY } = window;

    scrollY > 200 ? setToggleBtn(true) : setToggleBtn(false);
  };

  // scroll 이벤트 발생 시 이를 감지하고 handleScroll 함수를 실행
  useEffect(() => {
    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  // 버튼 클릭 시 스크롤을 맨 위로 올려주는 함수
  const goToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  // 토글 여부 state에 따라 버튼을 보여주거나 감추게 만듦
  return toggleBtn ? (
    <div onClick={goToTop}>
		// ... //
    </div>
  ) : null;
}

export default ToTheTop;

정말 간단하다! 긴 설명보다 주석을 읽으며 따라가면 이해가 쉽다.
필자는 Typescript를 사용해서 프로젝트를 진행했지만, 이 파트는 JS로 하던 것과 다른 것이 없다.

참고 자료

참고 자료 1
참고 자료 2
scrollTo 메서드 MDN docs