[DOM] JavaScript로 페이지 스크롤 제어하기

스크롤 위치 이동

JavaScript를 사용하여 스크롤 위치를 이동하려면 window.scrollTo(x,y) 함수를 사용합니다.

아래의 코드를 통해 스크롤을 지정된 좌표로 이동시킬 수 있습니다.

// x와 y 좌표로 스크롤 이동
window.scrollTo(0, 300);

위의 코드는 x 좌표 0 과 y 좌표 300으로 스크롤을 이동시킵니다. 이렇게 원하는 위치로 스크롤을 이동할 수 있습니다.

현재 스크롤 위치 확인

때로는 현재 스크롤 위치를 확인하고 싶을 때가 있습니다. 이를 위해 window.scrollY 를 사용하여 웹브라우저에서 y축을 기준으로 스크롤된 위치를 확인할 수 있습니다. 아래 코드는 스크롤 위치를 표시합니다.

// 현재 스크롤된 위치를 표시
document.querySelector("#absolute").innerHTML = window.scrollY;

이제 JavaScript를 활용하여 웹페이지에서 스크롤 위치를 제어하고 사용자가 원하는 위치로 이동할 수 있습니다.