하단 이동 버튼

진행 중인 프로젝트에서 하단으로 이동하는 버튼이 필요해 알아보았다.

 

하단 버튼은 페이지 총 Height인 document.body.scrollHeight를 scrollTo()함수의 top값에 넣어 주면된다.

 

⭐ scroll이 이루어진 영역을 기준으로 scrollTo 함수를 실행해야 작동한다.

아래 코드는 스크롤이 생기는 window영역으로 기준을 잡아 window.scrollTo() 를 실행시킨다.

const Area = document.querySelector(".area");
const moveBtn = document.querySelector(".down-btn");

moveBtn.addEventListener('click', () => {
  window.scrollTo({
    top: document.body.scrollHeight, 
    behavior: "smooth"
  })
});

See the Pen scroll bottom btn by pminsun (@pminsun) on CodePen.

 

React 일 경우

특정영역 기준이 필요 할 경우 useRef()를 활용한다.

export default function RacingGame() {

 const container = useRef<HTMLDivElement>(null);
 const downScreen = () => {
	 if(container.current){
	    container.current.scrollTo({
	      top: document.body.scrollHeight,
	      behavior: "smooth",
	    });
    }
  };
  
  return (
     <div ref={container}>
	     <div onClick={downScreen}>하단 이동</div>
	     <div></div>
     </div>
   )
 }