JavaScript) 원하는 위치로 이동하기, 특정 위치로 이동. 스크롤 이동. 자바스크립트 scrollTo

스크롤 이동

scrollTo 는 특정 위치로 이동시켜주는 함수다. 

 

scrollTo(가로, 세로)

 

지금 네이버를 켜서 콘솔창에 찍어보면 바로 이동한다. 

 

window.scrollTo(0, 3000)

 

 

 

이 함수는 더 자세히 적을수도있는데 

window.scrollTo({top: 3000, behavior:'smooth'})

 

이렇게도 쓸 수 있다. 

 

옵션인 behavior은 어떻게 이동할지에 대한 옵션으로, 

• smooth: 스크롤이 부드럽게 움직인다.
• instant : 스크롤이 바로 해당지점으로 움직인다.
• auto : 기본 움직임

 

 

 

 

 

전체 브라우저 스크롤과 DIV내의 스크롤

window.scrollTo는 전체 브라우저의 스크롤을 조절하고, 

div.scrollTo는 해당 요소 내에서만 스크롤을 조절한다. 

ex) document.getElementById("testDiv").scrollTo(0, 3000);

 

이때 무작성 아무 사이트에서 id가 있는 div태그를 하고 scrollTo를 하면 이동이 안될거다. 

scrollTo가 동작되는 기본 조건은 해당 태그내부에 overflow : scroll이나 auto가 있어서 스크롤이 가능해야한다. 

 

따라서 전체 화면안에 특정영역에 스크롤이 잇어서 이동시키고 싶을때는 

DIV.scrollTo()로 사용하면된다. 

**여기서 DIV는 예시

 

 

 

 

 

 

 

특정 태그의 위치로 이동하기

 

어떤 버튼을 클릭했을때 특정 태그의 위치로 이동하고싶다면, scrollIntoView()를 쓰면된다. 

<div id="div_best"></div>

let divTest = document.getElementById("div_best")
divTest.scrollIntoView({behavior : 'smooth'})