[React] TopButton (scroll to top) 만들기

개요

최근 프로젝트에서 무한 스크롤을 다루면서 최상단으로 돌아갈 때 사용자의 편의를 위해서 scroll to top으로 가는 버튼을 만들게 되었다.

간단하지만 언젠가는 다시 사용할 거 같아서 저장하게 되었다.

코드 작성 및 설명

function TopButton() {

    const [showButton, setShowButton] = useState(false);

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

    }
    useEffect(() => {
        const handleShowButton = () => {
            if (window.scrollY > 500) {
                setShowButton(true)
            } else {
                setShowButton(false)
            }
        }

        console.log(window.scrollY)
        window.addEventListener("scroll", handleShowButton)
        return () => {
            window.removeEventListener("scroll", handleShowButton)
        }
    }, [])

    return showButton && (
        <div className="scroll__container">
            <button id="top" onClick={scrollToTop} type="button" > Top</button>
        </div>

    )
}

---

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

중요 포인트라고 생각되는 부분이다.
처음에는 애니메이션을 직접 적용하려고 했으나 mdn에서 더 간결한 방법을 제공하고 있었다.

behavior는 auto , smooth 두 가지로 나뉘는데 auto는 해당 위치로 바로 이동하고, smooth는 부드럽게 이동한다.

useEffect(() => {
        const handleShowButton = () => {
            if (window.scrollY > 600) {
                setShowButton(true)
            } else {
                setShowButton(false)
            }
        }


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

window.scrollY > 600 부분에서 사용자가 원하는 스크롤 정도를 설정할 수 있다.

addEventListener를 통해 스크롤 정도를 확인하고 언마운트 시 사용할 clean-up 함수를 추가하였다.