[JS] 클릭하면 특정 위치로 화면 스크롤 하기: scrollIntoView

 

 

element.scrollIntoView();

 

 

element가 있는 위치로 스크롤 된다. 

 

 

 

element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

 

behavior: 기본 값은 auto. smooth하면 부드럽게 스크롤링 됨

block: 수직으로 스크롤링이 될 때 정렬될 요소의 위치를 지정해준다. (start, center, end, nearest) 기본값은 start

inline: 수평에서 스크롤링이 될 때 정렬될 요소의 위치를 지정해준다. (start, center, end, nearest) 기본값은 nearest

 

 

 

예제

<script>
    const button = document.querySelector('button');
    const rabbit = document.querySelector('#rabbit');
    
    button.addEventListener('click', () => {
      rabbit.scrollIntoView({behavior: 'smooth', block: 'center'});
    })
</script>