[React] window.scrollTo() : 지정된 위치로 스크롤 이동하기

Web API를 이용하여 함수 하나만 쓰면 되는데, 원하는 위치(x 좌표, y 좌표)를 넣어주면 된다! 그래서 웹 페이지의 최상단으로 이동하려면 window.scrollTo(0, 0)으로 구현이 된다. 아래는 특정 요소의 높이를 받아와서 그 아래로 이동하는 예시이다. TypeScript + Styled-components를 사용하여 구현하였고, 아래 화살표를 클릭하면 해당 배경의 이미지 높이를 받아와서 그 아래로 스무스하게 이동할 수 있게 하였다.

 

728x90

 

---

 

특정 요소 밑으로 이동하기

1. 해당 요소의 높이 받아오기

2. window.scrollTo() 사용하기

 

전체 코드

import React, { useRef } from "react";

const Intro = () => {
    const ref = useRef<HTMLInputElement>();

    const handleScroll = () => {
        const screenHeight = ref.current.clientHeight;

        window.scrollTo({
            top: screenHeight,
            behavior: "smooth",
        });
    };
    
    return (
        <Wrapper ref={ref}>
            <Arrow onClick={handleScroll} />
        </Wrapper>
    )
}

 

참고 문서

https://developer.mozilla.org/ko/docs/Web/API/Window/scrollTo

Window.scrollTo() - Web API | MDN