[ JavaScript ] scrollIntoView()로 스크롤을 원하는 위치로 이동하기

 

개인적으로 요즘은 무한 스크롤 방식을 많이 사용해서 스크롤을 많이 내렸을 때

빠르게 상단으로 이동하고 싶은데 막막할 때가 많다.

그럴 때 위와 같이 스크롤을 상단으로 이동하는 버튼이 있으면 참 편리하다는 생각을 많이 했다.

그래서 해당 버튼을 구현해 보았고,이렇게 스크롤을 원하는 위치로 쉽고 간단하게

이동하는 방법으로는 scrollIntoView() 메소드를 활용할 수 있다.

 

scrollIntoView 메서드 사용법

원하는 DOM요소에 이 메소드를 호출하면 해당 요소가 뷰포트 내로 보이도록 한다.

 

const targetElement = document.getElementById('targetElement');
targetElement.scrollIntoView();

 

위의 코드는 targetElement라는 id를 가진 요소가 뷰포트 내에서 보이도록

자동으로 스크롤을 할 수 있게 된다.

 

부드러운 스크롤 효과 주기

scrollIntoView()메서드는 다양한 옵션을 받을 수 있고, 이를 통해 세부적인 제어가 가능하다.

behavior 옵션을 추가하여 스크롤 동작 효과를 줄 수 있는데

auto : 기본값으로 스크롤이 즉시 이루어진다.

smooth : 스크롤이 부드럽게 이루어진다.

 

const targetElement = document.getElementById('target-element');
targetElement.scrollIntoView({ behavior: 'smooth' });

 

위와 같이 작성시에 부드럽게 스크롤이 작동하게 된다.

 

 

스크롤 정렬 방식 지정하기

또한 scrollIntoView()메서드에는 block 이나 inline옵션도

추가하여 스크롤된 요소의 정렬 방식을 조절할 수 있다.

block은 수직으로 스크롤링 될 때,

start, center, end, nearest (요소의 젤 위, 중간, 끝, 가까운 곳에 정렬)

inline은 수평으로 스크롤링 될 때,

start, center, end, nearest (요소의 시작, 중간, 끝, 가까운 곳 정렬)

 

 

 

const targetElement = document.getElementById('target-element');
targetElement.scrollIntoView({ block: 'center' });

 

해당 코드는 targetElement가 뷰포트 내에서 가운데에 정렬되어 스크롤이 된다.

 

targetElement.scrollIntoView(({behavior:'smooth', block:'start'});

 

이렇게 behavior과 block옵션을 같이 추가해서 사용할 수도 있다.