개발일지

원하는 위치로 화면의 스크롤 이동시키기

실무에서 다음과 같은 요구사항은 매우 흔합니다.
‘가장 위로 이동하기 버튼 구현하기’ 혹은 ‘입력 에러가 발생한 텍스트 박스로 스크롤 이동시키기’ 같은 것입니다.
해시태그를 사용하거나, Element.scrollTop메소드를 사용하면 구현할 수 있습니다.
저 역시 그렇게 구현해오고 있었구요.

Element.scrollIntoView(alignToTop : boolean)메소드를 사용하면,
스크롤 가능한 요소의 스크롤을 부모 요소의 표시영역 기준으로 이동시킬 수 있습니다.
아래의 예제는 스크롤 가능한 정사각형 div안에 여러 개의 div들이 혼재되어 있을 때,
부모 엘리먼트의 스크롤을 부모의 표시 가능영역 윗부분 혹은 아랫부분으로 이동시킵니다.
MDN:Element.scrollIntoView()

See the Pen scrollIntoView() 활용하기 by cinos (@shoveller) on CodePen.