네이버 특별 심화반 진행하면서 프로젝트 개선도 하고있다.
그중 파이널 프로젝트때 랜딩페이지의 버튼에도 넣었으면서, 사용자가 보기 쉽게 현재페이지 스크롤 위치가 어디던 상관 다른페이지로 넘어갈때 스크롤을 최상단에 위치시키도록 구현한 Window.scrollTo() 기능에 대해 설명하려 한다.

Window.scrollTo()가 뭐지?

문서의 지정된 위치로 스크롤한다.

즉, 이동하고 싶은 위치로 스크롤을 이동시키는 주문이다.

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

// 기준: 문서의 왼쪽상단
// x좌표 : 가로축 , y좌표 : 세로축

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

// top : 세로위치, left: 가로위치, behavior: 스크롤 효과속성

• behavior 옵션
  - auto : 기본값, 바로 위치로 이동
  - smooth : 부드럽게 이동

그럼 좌표는 어떻게 알아오지?

기본적으로 좌표의 숫자단위는 pixel이다.

자바스크립트의 querySelector와 offsetTop, 혹은 offsetLeft로 해당 태그의 위치를 얻어올 수 있다.

위치를 알아오는 과정

1. 먼저 document.querySelector로 위치를 알아오려는 요소를 가져온다.
2. 위치를 알아오려는 요소를 가져왔으면 offsetTop으로 해당 요소의 top 위치(margin 값 포함)를 가져온다.
3. top 위치를 가져왔으면 offsetLeft로 해당 요소의 left 위치(margin 값 포함)를 가져온다.

이를 어떻게 프로젝트에 적용했을까?

랜딩페이지의 버튼기능에 적용

1. documnet.querySelector()로 위치를 알아냈다.
   여기서 로테이션 챔피언 위치부분의 id가 champPre이므로

document.querySelector("#champPre")

이렇게 위치를 불러왔고, 이를 location 이라는 변수에 선언하고 querySelector의 값을 할당했다.

    let location = document.querySelector("#champPre")});

2. 요소를 가져왔으므로 offsetTop으로 변수 location의 top 위치를 가져왔다.(여기서 left값은 필요없어서 생략했다.)

    let location = document.querySelector("#champPre").offsetTop;

3. 위치를 모두 가져왔으므로 이를 window.scrollTo()의 parameter에 넣어주고나서 로직을 scrollMove라는 함수로 만들어준뒤 버튼에 onClick함수에 넣었다.

  const scrollMove = () => {
    let location = document.querySelector("#champPre").offsetTop;
    window.scrollTo({ top: location, behavior: "smooth" });
  };

어떤 페이지로 넘어가던 자동으로 스크롤이 최상단에 위치하게끔 적용

1. 우선 ScrollToTop 이라는 파일을 생성했다.
2. 그리고 ScrollToTop 함수를 생성하여 이를 export 할 수 있게끔 처리했다.
3. useLocation()과 useEffect()를 사용하여 처리해주었다.

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

export default function ScrollToTop(){
   // pathname으로 사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hooks을 만들었다.
    const { pathname } = useLocation();

  // pathname을 인식할때마다 스크롤이 (0,0)(x좌표 0, y좌표 0)으로 상태변화를 감지하게 useEffect 처리를했다.
    useEffect(() => {
        window.scrollTo(0,0);
    }, [pathname]);

    return null;
}

4. 마지막으로 이 ScrollToTop 함수를 App.js에 import하여 렌더링 부분에 최상단에 위치시켜 어떤 페이지로 넘어가던 자동으로 최상단에 위치할 수 있게끔 처리시켜줬다.

결론

1. Window.scrollTo() 는 스크롤을 이동시키는 주문이다!
2. 위치를 알아내는 방법은 x좌표, y좌표를 쓰는 방법과 document.querySelector, offsetTop, offsetLeft를 사용하는 방법이 있다.
3. 필자는 이 로직을 유용하게 사용했다.