<React> Top버튼 만들기

홈페이지 이용에 편리함을 주는 scroll to top 버튼 만들기

scroll 문법

• scroll 3가지 문법
  window.scrollTo(x좌표,y좌표)
  window.scrollTo({top,left,behavior})
  window.scroll(top,left,behavior)

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

}

behavior=auto, smooth 두가지 옵션이 있다
auto는 위치로 바로 대려다주고
smooth는 부드럽게 끌어올려준다

top button

클릭할 버튼을 만들어주고 클릭할 때 반응할 onClick함수도 넣어준다

<div className="scroll">
<button onCLick={scrollToTop}>Top</button>
</div>

scss

버튼을 가릴 요소가 있다면 z-index를 넣어서 우선순위를 주고
right,buttom은 화면에 따라 조정

.scroll{
  position:fixed;
  right:2%;
  bottom:5%;
  z-index:1;
  
  button{
      font-weight: bold;
    font-size: 10px;
    padding: 15px 10px;
    background-color: white;
    color: black;
    border: 1px solid rgb(210, 204, 193);
    border-radius: 50%;
    outline: none;
    cursor: pointer;
  }  

}

useState

버튼이 첫 시작점에서는 사라져 있다가 스크롤시에 나타날 수 있도록 false로 초기값을 세팅한다

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

useEffect

스크롤을 100만큼 내렸을 때 true로 state가 변경되서 Top버튼이 나타나게 해준다
얼마만큼 스크롤 되었는지 알기 위해서 EventListener를 추가해주고
언마운트 시에 remove 될 수 있게 clean-up해준다

useEffect(()=>{
	const handleShowButton=()=>{
    window.scrollY>100? setShowButton(true):setShowButton(false)
    }
    
    window.addEventListener("scroll",handleShowButton)
  	return=()=>{
    	window.removeEventListener("scroll",handleShowButton)
    }
},[])

조건부 렌더링 &&

showButton &&을 통해 showButton이 true 일 경우에만 조건을 실행 할 수 있도록 한다

전체코드

import React, { useEffect, useState } from 'react';
import './TopButton.scss';

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

  const scrollToTop = () => {
    window.scroll({
      top: 0,
      behavior: 'smooth',
    });
  };
  useEffect(() => {
    const handleShowButton = () => {
      window.scrollY > 100 ? setShowButton(true) : setShowButton(false);
    };

    console.log(window.scrollY);
    window.addEventListener('scroll', handleShowButton);
    return () => {
      window.removeEventListener('scroll', handleShowButton);
    };
  }, []);
  return (
    showButton && (
      <div className="scroll">
        <button onClick={scrollToTop}>Top</button>
      </div>
    )
  );
}

export default TopButton;