school eats) scroll top button 기능 구현

모바일 사용자를 위해 일정 스크롤을 내릴 시 scroll top button 이 디스플레이 되어 버튼 클릭시 화면 상단으로 바로 이동합니다.

export default function ScrollButton(): JSX.Element {
  const [showButton, setShowButton] = useState(false);
  useEffect(() => {
    const checkScrollTop = () => {
      if (!showButton && window.pageYOffset > 250) {
        setShowButton(true);
      } else if (showButton && window.pageYOffset <= 250) {
        setShowButton(false);
      }
    };
    window.addEventListener('scroll', checkScrollTop);

    return () => {
      window.removeEventListener('scroll', checkScrollTop);
    };
  }, [showButton]);

  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  };
  return (
    <>
      <S.Wrapper>{showButton && <S.Button onClick={scrollToTop}>↑</S.Button>}</S.Wrapper>
    </>
  );
}