🤨Top버튼 만들기

홈페이지를 만들면서 scroll to top버튼을 만들어 보기로 했다!

1.버튼아이콘과 클릭이벤트 주기

const [showBtn, setShowbtn] = useState(false);

{showBtn && (
        <div
          onClick={scrollToTop}
          className="text-4xl text-black fixed bottom-28 right-10 border-2 p-2 border-black rounded-ml cursor-pointer hover:text-current hover:border-transparent transition-all"
        >
          <FaArrowUpAZ />
        </div>
      )}

버튼을 감싸주는 div와 top icon태그를 가지고 오고 클릭하였을 때 스크롤 해줄 onClick 함수를 넣어주자. 그리고 조건부 랜더링을 위해 논리연산자 && 을 사용해 준다.

2.클릭시 위로 스크롤하는 함수만들기

const scrollToTop = () => {
    window.scroll({
      top: 0,
      behavior: "smooth",
    });
  };

top icon태그 클릭시 발생하는 scrollToTop함수를 만들어 준다.
mdn에 나와있는 Window.scroll()매서드를 사용해 원하는 위치를 설정해준다
behavior = auto , smooth
behavior는 두가지로 나뉘는데 auto = 위치로 바로 대려다 주고 smooth는 부드럽게 끌어올린다.

3. 버튼아이콘 나타내기

useEffect(() => {
    const handleShowBtn = () => {
      if (window.scrollY > 3000) {
        setShowbtn(true);
      } else {
        setShowbtn(false);
      }
    };

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

스크롤을 3000만큼 내렸을 때 true로 변경하여
TOP버튼을 나타나게 해준다.

얼만큼 스크롤 되었는지 알기 위하여 EventListener를 추가해준다.