상단 이동 버튼 & 스크롤 시 버튼 나타나기

포스트 글이 길거나 블로그, 프로젝트 갯 수가 많아지면 스크롤이 발생해 상단 이동 버튼을 배치하는게 좋을 것 같아 추가해보았다.

 

상단 이동 버튼

window.scrollTo(xpos, ypos, behavior:'auto'}) ****를 사용하면 원하는 위치로 이동 시킬 수 있다.

behavior의 값에는 auto, instant, smooth가 있다. (문자이므로 따옴표가 필요하다.)

auto는 기본 값이며, 바로 위치로 이동한다. instant도 같은 동작을 한다.

smooth는 부드럽게 이동하는 애니메이션 효과를 보여준다.

⇒ 부드럽게 상단 위치하기 위해서 클릭 시 window.scrollTo({ top: 0, behavior: "smooth" }); 실행되게 했다.

import { useEffect, useState } from "react";
import { HiChevronUp } from "react-icons/hi";

export default function MoveToTop() {
  const moveToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <div
      onClick={moveToTop}
      className="fixed bottom-7 right-4 lg:right-10 p-2 z-20 cursor-pointer hover:scale-90 transition-all duration-500 rounded-full bg-[#2c82f2]"
    >
      <HiChevronUp className="text-2xl text-white" />
    </div>
  );
}

 

상단 이동 버튼 + 일정 스크롤 높이에서 등장

추가로 스크롤 브라우저 최 상단에서는 상단 이동 버튼이 필요 없기 때문에 일정 스크롤 높이에서 부터 상단 이동 버튼이 등장했으면 좋을 것 같았다.

useState 를 활용해 버튼의 상태 값을 css에 적용했다.

showTopBtn ? "opacity-100 visible" : "opacity-0 invisible" showTopBtn가 true면 보이게 적용했다.

*visible 는 visibility: visible; / invisible 는 visibility: hidden; (tailwind 표기)

이제 필요한 거는 원하는 시점에서 showTopBtn가 true로 변하게 해야 됩니다.

• useEffect 훅을 활용하여 컴포넌트가 마운트될 때 실행됩니다.
• 스크롤 이벤트가 발생할 때마다 호출 되는 showBtnClick 함수가 정의합니다.
• showBtnClick 함수 내에서 현재 스크롤 위치 (window.scrollY) 를 확인하고, 위치가 400보다 크면setShowTopBtn(true)를 호출하고 그렇지 않으면 setShowTopBtn(false) 를 호출합니다.
• window.addEventListener("scroll", showBtnClick);를 통해 스크롤 이벤트에 대한 리스너가 등록되어 스크롤이 발생할 때마다 showBtnClick 함수가 호출됩니다.
• 컴포넌트가 언마운트되면 return 블록 내의 함수가 실행되어 window.removeEventListener("scroll", showBtnClick); 를 통해 등록된 스크롤 이벤트 리스너를 제거하여 메모리 누수를 방지합니다.

 useEffect(() => {
    const showBtnClick = () => {
      if (window.scrollY > 400) {
        setShowTopBtn(true);
      } else {
        setShowTopBtn(false);
      }
    };
    window.addEventListener("scroll", showBtnClick);
    return () => {
      window.removeEventListener("scroll", showBtnClick);
    };
  }, []);

 

 

전체 코드

import { cls } from "libs/utils";
import { useEffect, useState } from "react";
import { HiChevronUp } from "react-icons/hi";

export default function MoveToTop() {
  const [showTopBtn, setShowTopBtn] = useState(false);
  const moveToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  };
  useEffect(() => {
    const showBtnClick = () => {
      if (window.scrollY > 400) {
        setShowTopBtn(true);
      } else {
        setShowTopBtn(false);
      }
    };
    window.addEventListener("scroll", showBtnClick);
    return () => {
      window.removeEventListener("scroll", showBtnClick);
    };
  }, []);
  return (
    <div
      onClick={moveToTop}
      className={cls(
        showTopBtn ? "opacity-100 visible" : "opacity-0 invisible",
        "fixed bottom-7 right-4 lg:right-10 p-2 z-20 cursor-pointer hover:scale-90 transition-all duration-500 rounded-full bg-[#2c82f2]"
      )}
    >
      <HiChevronUp className="text-2xl text-white" />
    </div>
  );
}

 

 

 

 

특정 영역 안에서 상단 이동

다른 프로젝트에서 탭이 있는 모달 창을 만들던 중 스크롤이 생기는 모달이어서 탭 클릭 시 자동으로 위에서 부터 다시 시작하게 만들어야 했다.

DOM요소에 접근하기 위해 사용되는 React Hook 인 useRef 를 활용하여 해당 영역을 참조한다.

아래 코드에서는 참조된 영역의 scrollTop이 0이 아니면 수직 스크롤 바의 위치를 0으로 변경한다.

import { useState, useEffect, useRef } from "react";

export default function Ex() {
	const [modalTab, setModalTab] = useState(1);
  const modalInfoModal = useRef<HTMLDivElement>(null);

  const selectModalTabHandler = (order: number) => {
    setModalTab(order);

    if (modalInfoModal.current.scrollTop !== 0) {  // 상단으로 이동
      modalInfoModal.current.scrollTop = 0;
    }
  };

	return (
		<Modal>
			<ul>
         <li
           onClick={() => selectModalTabHandler(1)}
           className={modalTab === 1 ? "on" : ""}
         >
           탭 1
         </li>
         <li
           onClick={() => selectModalTabHandler(2)}
           className={modalTab === 2 ? "on" : ""}
          >
          탭 2
         </li>
      </ul>
			<div
        ref={modalInfoModal}
       >
				{modalTab === 1 ? (      
            <div className="topRank"> 탭 1 content</div>
        ) : (
            <div className="topRank"> 탭 2 content</div>
        )}
			</div>
		<Modal/>
	)
}