[Javascript] 원하는 위치로 스크롤 이동하기

 

1. 기본 이동

window.scrollTo(X, Y);

x는 가로좌표, y는 세로좌표를 적어준다.

 

ex)

 

 

 

2. 부드럽게 이동

window.scrollTo({top:y, left:x, behavior:'smooth'});

마찬가지로 x에는 가로좌표, y에는 세로좌표를 적어주면 된다.

 

ex)

 

 

 

 

 

• 좌표 구하는법

const rect = document.querySelector('div').getBoundingClientRect();
console.log(rect);

rect 출력된모습 ▽

{
    "x": 0,
    "y": -700,
    "width": 1903,
    "height": 2497,
    "top": -700,
    "right": 1903,
    "bottom": 1797,
    "left": 0
}

• x : 브라우저 창기준 x 좌표
• y : 브라우저 창기준 y 좌표
• width : 엘리먼트 가로 길이
• height : 엘리먼트 세로 길이
• top : 브라우저 창기준 세로 시작점 부터 엘리먼트 윗변 까지의 거리
• left : 브라우저 창기준 가로 시작점 부터 엘리먼트 좌측변 까지의 거리
• right : 브라우저 창기준 가로 시작점 부터 엘리먼트 우측변 까지의 거리
• bottom : 브라우저 창기준 세로 시작점 부터 엘리먼트 아래변 까지의 거리

여기서

top값은 Y로, left값은 X로 사용해주면 된다

 

top값이 -700, left값이 0 이므로

위에 스크롤 이동 코드에서 Y부분에는 700, X부분에는 0을 적어주면 된다.