🧟‍♂️ [React] position: sticky로 따라다니는 Top 버튼 (scroll to top) 만들기

Top 버튼을 클릭하면 맨 위로 올라가는 것을 구현해봤습니다.

👋 먼저, 버튼 만들어주기

1. react-icons 라이브러리를 설치해서 위를 가리키는 화살표 아이콘을 가져왔다.
   https://react-icons.github.io/react-icons/

$yarn add react-icons

검색바에 arrow 치면 굉장히 많이나옴 👀
그중에서 맘에 드는 화살표를 골라서 가져다 쓰면 된다.

import { BsFillArrowUpCircleFill } from 'react-icons/bs'

이렇게 사용하면 되는데 아이콘명 앞글자를 따서 from에다 쓰면 된다. 내가 선택한 아이콘의 앞글자는 bs라 react-icons/bs로 불러왔다.

👩🏻‍💻 JSX와 Scroll to Top 로직

import styles from './TopButton.module.scss'
import { BsFillArrowUpCircleFill } from 'react-icons/bs'

export default function TopButton() {

   // 👉 클릭 시 맨 위로 올라가도록
  const handleScroll = () => {
    if (!window.scrollY) return

    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    })
  }

  return (
    <div className={styles.topBtn_wrap}>
      <button className={styles.topBtn} onClick={handleScroll}>
        <BsFillArrowUpCircleFill />
      </button>
    </div>
  )
}

정말 간결한 로직으로 구현할 수 있다. 이제 버튼 클릭하면 슝 올라간다.

작업하면서 제일 골치 아팠던게 스타일이 제일 빡셌다..
대부분 작업자들이 position: fixed로 구현 한 걸 봤는데, fixed를 사용하면 넓이 기준점을 잡아줘야돼서 생각치 못했던 버그(?)가 발생 됐다. 어떤 문제냐면 넓이 기준점(950px) 때문에 이 버튼을 부모 태그로 감싸 넓이 기준점을 주어서 다른 링크로 넘어 가고싶을 때 TOP 버튼과 동일한 위치에 있을 경우 링크가 안눌리는 현상같은 버그.. 그래서 이걸 또 해결하기 위해 부모 태그를 없애고 right를 %로 주자니 브라우저 창을 줄이면 줄일수록 버튼이 내가 원하는 위치가 아닌 다른 위치로 도망간다. 아무튼 여러 시행착오를 거친 뒤 여러 수정을 통해 진짜 심플한 방식으로 해결했다.

.topBtn_wrap {
  position: sticky;
  bottom: 70px;
  float: right;
}
.topBtn {
  font-size: 3.8rem;
  color: #ffc949 !important;
}

position:sticky로 해도 버튼이 스티키하게 잘 붙어 따라다니기 때문에 이걸 사용해서 float:right를 해서 맨 오른쪽에 위치하도록 했다. 이제 부모태그에 기준 너비값 잡을 필요도 없고 내가 가고자 하는 링크와 동일한 위치에 있을 때 링크 클릭도 가능하게 됐다. 해결 완료 👏

내용 추가

스크롤을 내렸을 때만 scroll to top 버튼이 노출되게 하고 싶으면 아래와 같은 코드로 작성하면 된다.

import styles from './TopButton.module.scss'
import { useState, useEffect } from 'react'
import { BsFillArrowUpCircleFill } from 'react-icons/bs'

export default function TopButton() {
  const [showButton, setShowButton] = useState<boolean>(false)

  const handleScroll = () => {
    if (!window.scrollY) return

    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    })
  }

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

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

  return (
    <div className={styles.topBtn_wrap}>
      {showButton && (
        <button className={styles.topBtn} onClick={handleScroll}>
          <BsFillArrowUpCircleFill />
        </button>
      )}
    </div>
  )
}

결과물