[JavaScript] 특정 위치로 스크롤 이동시키기 (scrollTo)

본격 팀 프로젝트가 시작됐다!

내가 해보고싶다한 기능을 구현하기위해 테스트를 해보다가.. 예상치못하게 참고한 코드들이 하나도 이해가 안돼서 ㅎㅎㅎ ㅠㅠ

한참을 고민했다..

일단 기반이되는 scrollTo()를 먼저 정리해보자!

 

window.scrollTo()

문서 내 특정 좌표로 스크롤을 이동한다!

Syntax

scrollTo(x, y);
scrollTo(({top: y, left: x, behaviour: option});

 

x, y값은 이동할 거리(단위: 픽셀), behaviour는 움직임에대한 옵션을 설정할 수 있다.

 

behaviour 옵션

• smooth: 부드럽게 이동
• instant: 한번에 이동
• auto: smooth를 지원하지 않는 경우, 브라우저에서 지원하는 방식으로 스크롤 (대부분 목표 위치로 즉시 이동)

behaviour 옵션을 설정하지 않고 위치만 지정하는 경우 즉시 이동!

 

scrollBy()

현재 위치에서부터 n픽셀 떨어진 곳으로 이동하고 싶을 때는 이 메서드를 사용한다!

 

예제 - 부드럽게 이동

<button class="moveBtn">Click!</button>
<div class="passArea">
    내
    려
    가
    자
</div>
<p class="dest">도착!</p>

const destination = document.querySelector(".dest").offsetTop;
const moveBtn = document.querySelector(".moveBtn");

moveBtn.addEventListener("click", () => {
  window.scrollTo({ top: destination, behavior: "smooth" });
});

누르면 자동 스크롤될 버튼, 지나쳐갈 긴 div, 도착지점을 만들어줬다.

도착지점의 위치를 받아 부드럽게 이동시켜줬다.

 

문제는.. 속도 조절을 할 수 없다!

내가 생각한 속도보다 너무 빠르다 이때부터 속도 조절을 위해 한참을 헤매게된다..

 

 

예제 - 즉시 이동

moveBtn.addEventListener("click", () => {
  window.scrollTo(0, destination);
});

위 HTML 구조는 같고, behaviour 옵션 없이 바로 위치를 지정해줬다.

 

 

 

참고자료

MDN, Window: scrollTo() Method

Window: scrollTo() method - Web APIs | MDN