[JS] 페이지 내 특정 위치로 스크롤 이동하기

 

페이지 내 특정 위치로 이동 시켜주는 window.scrollTo 메서드를 활용하는 방법을 소개해드리겠습니다.

window.scrollTo 메서드

window.scrollTo 메서드를 사용하는 다음과 같이 X, Y 위치 값을 넘겨주면 즉시 해당 위치로 이동하게 됩니다.

 

javascript
// ( x좌표 - 가로 , y좌표 - 세로 )
window.scrollTo(xpos, ypos);

 

 

객체를 이용해서도 메서드를 사용할 수 있으며, left(가로), top(세로) 값으로 X, Y 값을 대신할 수 있습니다.

{ behavior: "smooth" } 속성을 지정해주면 위치를 이동할 때, 애니메이션 효과가 적용되게 됩니다.

 

javascript
// option { left, top, behvior }
window.scrollTo({ left: 0, top: 0, behavior: "smooth" });

 

스크롤 효과 속도 지정하기

기본 내장되어 있는 window.scrollTo 메서드는 속도 기능까지는 지원하지 않습니다.

 

javascript
/**
 * window.scrollTo() 메서드에 속도 적용
 * @param y Y위치 값으로 스크롤 이동
 * @param duration 해당 위치로 이동하는 총 시간
 */
const durationScrollTo = (y, duration = 1000) => {
  const stepY = (y - window.scrollY) / duration;
  const currentY = window.scrollY;
  const startTime = new Date().getTime();

  const scrollInterval = setInterval(() => {
    const now = new Date().getTime() - startTime;

    window.scrollTo({ top: currentY + (stepY * now) });

    if (duration <= now) {
      clearInterval( scrollInterval );
    }
  }, 1);
};

해당 코드는 효과가 진행되는 속도까지 반영해 자체 제작한 scrollTo 코드입니다. (Y 좌표만 구동)

 

코드설명

첫 번째 파라미터 값은 이동할 Y좌표, 두 번째는 진행될 밀리초입니다. (밀리초 - 1초 = 1000밀리 초)

 

javascript
const start = new Date().getTime()

setTimeout(() => {
  const end = new Date().getTime()
  
  console.log(end - start);
}, 1000);

이동할 좌표를 진행시간만큼 나눠주고 반복되는 함수에서 현재 진행된 시간만큼을 곱한 위치로 이동시키는 방법을 사용하였습니다.

 

현재 시간에서 코드가 시작된 시간을 통해서 코드의 실행 시간을 구할 수 있습니다.