window.scrollTo

window 객체의 scrollTo 메서드는 문서를 지정된 좌표로 스크롤 해주는 기능을 한다. (window는 생략 가능)

window.scrollTo()에는 두가지 사용법이 있다.

1) 첫번째 방식

window.scrollTo(xpos, ypos)

파라미터로 주어진 xpos는 x좌표, 즉 가로 위치를 말하는 것이고, ypos는 y좌표, 즉 세로 위치를 말하는 것이다.

2) 두번째 방식

window.scrollTo({top:0, left:0, behavior:'auto'});

top은 세로 위치, left는 가로 위치, scroll-behavior은 스크롤 효과를 지정하는 속성이다. behavior의 값에는 auto, instant, smooth가 있다. (문자이므로 따옴표가 필요하다.) auto는 기본값이며, 바로 위치로 이동한다. instant도 같은 동작을 한다. smooth는 부드럽게 이동하는 애니메이션 효과를 보여준다.

좌표 알아오기

이제 사용 방법을 알았으니, 이동시키려는 위치를 숫자(단위는 자동으로 pixel)로 넣어 사용하면 된다. 하지만 숫자를 직접 입력한다면 남들이 봤을 때 어느 위치인지 한눈에 파악하기도 힘들고, HTML 태그가 수정되어 위치가 바뀌었을 때 다시 수정해야 한다는 불편함이 있다. 자바스크립트의 querySelector와 offsetTop이나 offsetLeft로 직접 해당 태그의 위치를 얻어올 수 있다.

document.querySelector로 먼저 위치를 알아오려는 요소를 가져온다. offsetTop으로 해당 요소의 top 위치(마진 값까지 포함한다고 한다)를 가져온다. offsetLeft는 이름으로 유추할 수 있듯이 left 위치를 가져온다. 역시 마진 값도 포함한다.

var location = document.querySelector("#move").offsetTop;

id가 move인 요소의 top 위치를 가져올 수 있다.

window.scrollTo({top:location, behavior:'smooth'});

해당 위치로 부드럽게 이동할 것이다.

탭 메뉴를 클릭할 때 위 코드가 실행되게 한다면, 탭 메뉴를 클릭했을 때 특정 위치로 이동하는 코드를 구현할 수 있을 것이다.

+) 만약 위에 고정 메뉴가 있다면, 스크롤이 이동하면서 그 메뉴에 내용 윗부분이 가려질 수 있다.

var menuHeight = document.querySelector(".menu").offsetHeight;

window.scrollTo({top:location - menuHeight, behavior:'smooth'});

이렇게 offsetHeight로 해당 요소의 높이를 구하여 top 좌표에서 빼면 된다.

종합코드