특정 엘리먼트로 스크롤을 천천히 이동시키는 방법, scrollIntoView smooth

Last Modified : 2021-08-19 / Created : 2021-08-19

19,069
View Count

주소 복사하기

웹사이트의 특정 영역으로 스크롤을 이동시키는 방법 중 하나인 scrollIntoView()에 대하여 알아봅니다.

! [잠깐] 스크롤을 특정 엘리먼트로 이동시키는 방법은 뭐가 있을까?
원하는 위치로 스크롤을 이동하는 방법은 몇 가지가 존재합니다. 위 방법을 알아보기에 앞서 예전 또는 기존의 방법들을 먼저 알아봅니다.

1. 태그에 id를 추가하여 url에 # 기호를 사용하는 방법
; 엘리먼트에 id값을 추가한 뒤 url에 #(hash) 기호를 사용하면 해당 위치로 바로 이동이 가능합니다. 다만 부드럽게(smooth) 이동하려면 추가로 css를 사용하여야 합니다.

2. 해당 엘리먼트의 스크롤 위치를 구한 후 해당 위치로 이동시키는 방법
이 방법은 scrollIntoView() 이 전에 가장 많이 사용된 방법입니다. scrollTop() 함수를 사용하여 원하는 엘리먼트의 스크롤 위치로 이동하는 방법입니다.

3. 그 외의 방법의 라이브러리 사용하기
jQuery의 scrollTop()을 빼놓을 수 없겠죠. 기타 라이브러리를 사용할 수 있겠습니다.

위와 같이 몇 가지 기존 방법들을 알아보았는데요 ... 최근에는 대부분의 메이저 브라우저와 호환이 가능한 scrollIntoView()를 많이 쓰이는 것 같습니다. 우선 호환성 측면에서 좋고 몇 가지 옵션을 제공하기 때문에 스크롤을 부드럽게(smooth) 이동할 수도 있기 때문이죠.

# 자바스크립트 scrollIntoView() 사용하는 방법

이제 아래에서는 scrollIntoView() 사용 방법에 대하여 알아봅니다. 먼저 간단한 문법은 아래와 같습니다.

엘리먼트.scrollIntoView(옵션)

문법은 위와 같습니다. 옵션을 사용하기 위한 방법으로 아래와 같이 두 가지 방법으로 사용됩니다.

* 첫 번째 방법
간단하게 위쪽 Top or Start를 기준으로 위치할 것인지를 결정

Element.scrollIntoView(true or false)
// 해당 엘리먼트의 위쪽을 기준으로 위치할 것인지를 결정

* 두 번째 방법
두 번째 방법은 Boolean 형태인 true / false가 아닌 Object로 옵션을 설정할 경우입니다. 옵션은 각각 아래와 같이 동작하게 됩니다. 옵션은 아래와 같이 사용할 수 있습니다.

* Available options
behavior // 이동 애니메이션 방법으로 auto, smooth (Default. auto)
block // 스크롤 세로 방향(Vertical alignment)의 정렬 위치 start, center, end, nearest (Default. start)
inline // 스크롤 가로 방향(Vertical alignment)의 정렬 위치 start, center, end, nearest (Default. start)

아래와 같은 예시로 사용하는 것이 가능합니다.

Element.scrollIntoView({ block: 'center'})
Element.scrollIntoView({ inline: 'nearest'})

! 자바스크립트 scrollIntoView() 간단한 예제

간단한 예제를 만들어보려고 합니다. 아래는 Top과 Top Smooth라는 이름의 버튼을 두 개 만들고 클릭시 각각 페이지의 최상단으로 이동하는 간단한 예제입니다.

<button onclick="moveToTop()">Top</button>
<button onclick="moveToTopSmooth()">Top Smooth</button>

<script>
var moveToTop = function() {
document.body.scrollIntoView();
};

var moveToTopSmooth = function() {
document.body.scrollIntoView({ behavior: 'smooth' });
};
</script>

Top Smooth를 클릭할 경우 상단으로 부드럽게 이동하는 것이 차이점입니다. 이를 실제로 구현하면 아래와 같이 나타나게 될 것 입니다. 직접 클릭해보시기 바랍니다.

* 아래는 실제 예제를 구현

<button onclick="moveToTop()">Top</button>
<button onclick="moveToTopSmooth()">Top Smooth</button>
<script>
var moveToTop = function() {
document.body.scrollIntoView();
};
var moveToTopSmooth = function() {
document.body.scrollIntoView({ behavior: 'smooth' });
};
</script>

클릭하여 테스트해보시기 바랍니다.

여기까지 스크롤을 이동하는 방법 중 하나인 scrollIntoView()에 대하여 알아봤습니다.

아래의 글도 찾고 계시지 않나요?

자바스크립트 배열의 map() 함수 알아보기

자바스크립트 배열 메소드 every() 알아보기