JavaScript에서 요소로 창 스크롤하는 방법

scrollIntoView 메서드는 창을 주어진 요소로 스크롤합니다. 이 메서드는 창을 스크롤해야 할 요소에 적용됩니다. 메서드의 매개변수로 요소가 창의 어디에 위치해야 하는지 조절합니다: 창의 상단 또는 하단.

예제를 통해 살펴보겠습니다. 요소가 창의 상단에 오도록 스크롤해 봅시다:

elem.scrollIntoView(true);

이번에는 요소가 창의 하단에 오도록 스크롤해 봅시다:

elem.scrollIntoView(false);

설정 객체를 매개변수로 전달할 수도 있습니다. 요소로 부드럽게 스크롤해 봅시다:

elem.scrollIntoView({
	behavior: 'smooth',
});

설정 객체에는 요소에 대한 페이지 정렬 설정도 있습니다. block 설정은 수직 정렬을 지정하고, inline 설정은 수평 정렬을 지정합니다. 이들은 다음과 같은 값을 가질 수 있습니다: 'start', 'center', 'end', 'nearest'.

한번 시도해 보겠습니다:

elem.scrollIntoView({
	behavior: 'smooth',
	block: 'start',
	inline: 'end',
});

요소와 버튼이 주어졌습니다. 버튼을 클릭하면 페이지를 해당 요소로 스크롤하세요. 설명된 모든 기능을 사용해 보세요.