window.scrollTo()를 이용한 스크롤 이동

---

Window.scrollTo()

현재 페이지 → 다른 페이지로 넘어갈 때 스크롤의 위치를 지정한다.

---

 

보통 다음 페이지로 넘어갈 때 스크롤이 보기 좋게 최상단에 위치하도록 할 때 사용한다.

사용방법은 두 가지로 구분된다.

 

1. xy 좌표 이용

// x좌표 : 문서의 가로축 , y좌표 : 문서의 세로축 - 단위는 pixel

window.scrollTo(x좌표, y좌표)

 

2. options 이용

window.scrollTo({top, left, behavior})

// top : 세로 위치, left: 가로 위치, behavior: 스크롤 효과 - ex) smooth(부드럽게 이동), auto(한 번에 이동)

 

3. 좌표 파악 방법

JavaScript의 querySelector, offsetTop, offsetLeft로 좌표를 파악할 수 있다.

 

• querySelector: 위치를 알아오려는 요소 
• offsetTop: 해당 요소의 top 위치 (margin 포함)
• offsetLeft: 해당 요소의 left 위치 (margin 포함)

 

block이라는 id를 가진 요소의 위치를 불러와 location 변수에 할당한다.

let location = document.querySelector("#block");

offsetTop으로 blcok의 top 위치를 가져온다.

location = document.querySelector("#block").offsetTop;

 

함수 scrollToTop를 선언하고, window.scrollTo의 파라미터에 해당 변수를 넣는다.

const scrollToTop = () => {
    window.scrollTo({
      top: location,
      behavior: "smooth",
    });
  };

 

Button이 클릭되면 동작하도록 onClick에 scrollToTop 함수를 넣어준다.

<button onClick={scrollToTop} />

 

사용 예시

우측 하단 버튼을 누르면 최상단으로 이동한다.

 

Ref.

https://velog.io/@yeonlisa/Window.scrollTo

https://enai.tistory.com/33