[Javscript] window.scrollTo() 메서드

scrollTo는 document의 특정 좌표로 이동시켜주는 메서드다. 좌표의 숫자 단위는 픽셀이다. 숫자를 지정하면  직접 DOM 조작을 하지 않고 스크롤을 컨트롤할 수 있어 좋다.

 

내가 실제로 사용해 본 아래 예시처럼 behavior: smooth와 같이 움직임에 대한 옵션을 줄 수도 있다.

 

주의할 건 IE에서는 작동하지 않는다는 점이다. IE가 공식 지원 종료되면서 고려해야 하는 경우가 많이 줄어들기는 했겠지만, 만약 IE에서도 같은 동작을 하고 싶다면 우선 사용자의 브라우저 정보를 읽어 조건문 처리한 뒤, 비슷하지만 조금 다른 메서드를 사용해야 한다.

  const handleClick = () => {
    if (!window.scrollY) return
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

Window.scrollTo() - Web APIs | MDN