[React] 스크롤하면 나타나는 위로가기 버튼 만들기(Floating Action Button & Style-Components)

 프로젝트를 하며 디자이너가 스크롤 컨트롤이 일정 이상 생기면 나타나는 위로가기 버튼을 만들어달라고 했다..ㅎ

 

어떻게 개발할지 고민도 안하고 바로 만들었다 ㅋㅋ

 

1. window.pageYOffset를 통해 Scroll 높이 읽어오기

Scroll의 값을 읽어온 후 UseState를 통해 isVisible의 Bool 값을 지정했다. 

* window.pageYOffset 현재 문서의 수직 방향으로 스크롤된 픽셀의 양을 나타내는 속성

  const [isVisible, setIsVisible] = useState(false);
  
  
  const handleScroll = () => {
    const scrollTop = window.pageYOffset;
    if (scrollTop >= 400) {
      setIsVisible(true);
    } else {
      setIsVisible(false);
    }
  };

2. useEffect와 addEventListener 활용하여 위에 코드에서 작성한 handleScroll를 관리하였다.

Window.addEventListener를 통해 사용자의 스크롤이라는 Event가 발생했을 때 원하는 함수나 기능을 제어할 수 있다.

useEffect(() => {
  // 스크롤 이벤트 리스너를 추가
  window.addEventListener('scroll', handleScroll);

  // 컴포넌트가 언마운트되거나 업데이트되기 직전에 호출되는 함수를 반환
  // 이 함수에서는 스크롤 이벤트 리스너를 제거
  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
}, []);

3. 부드럽게 위로 가기 기능 구현

 window.scrollTo() 함수를 통해 페이지의 pageYOffset 값이 0이 되도록 하였다.

  const handleButtonClick = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

 

전체 코드

const FloatingActionButton = () => {
  const [isVisible, setIsVisible] = useState(false);

  const handleButtonClick = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const handleScroll = () => {
    const scrollTop = window.pageYOffset;
    if (scrollTop >= 400) {
      setIsVisible(true);
    } else {
      setIsVisible(false);
    }
  };

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

  return (
    <Div>
      <FloatingActionButtonComponets onClick={handleButtonClick} isVisible={isVisible}>
        <TopArrow src={require('../../../Assets/Img/MainHome_Img/FloatingButtonArrow.png')} />
        <TopText>TOP</TopText>
      </FloatingActionButtonComponets>
    </Div>
  );
};

export default FloatingActionButton;