웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

자바스크립트를 사용하여 특정 엘리먼트로 화면을 이동시키는 방법은?

Last Modified : 2019-08-12 / Created : 2017-03-30
58,088
View Count
자바스크립트를 사용하여 만약 특정한 영역 및 엘리먼트의 위치로 스크롤을 위치하려면 어떻게 해야할까요? 예를들어 회원가입을 원할 경우 입력폼이 보이는 곳으로 스크롤을 위치하는 방법이 필요합니다. 이때 가능한 방법은 아래처럼 세 가지를 생각해볼 수 있습니다.

i. #id를 a 태그 링크로 사용(Anchor 사용방법)
ii. focus() 이벤트를 사용하는 방법은
iii. scrollIntoView() 메소드를 사용하는 방법은




# 자바스크립트 원하는 위치로 스크롤 이동하는 방법

만약 아래와 같은 input 태그가 존재하는 경우를 예로 들어보겠습니다.
<input type="text" id="nickname" />


i. 하이퍼링크에 #id를 사용하기
만약 입력폼이 아래와 같이 nickname 이라는 id 속성을 갖는다면 다음과 같은 방법으로 링크를 만들어 이동시킬 수 있습니다.
<a href="#nickname">Write your nickname</span>


ii. focus() 이벤트를 사용하기
아래 방법 역시 간단하게 포커스 이벤트를 사용하여 현재 위치를 이동시킵니다. 이 방법은 바로 입력이 가능하다는 장점이 있지만 전체 태그 요소에 모두 적용 가능한 방법은 아닙니다. 하지만 대부분의 입력폼에는 적용이 가능한 방법입니다.
document.getElementById('nickname').focus();


iii. scrollIntoView() 메소드를 사용하는 방법
이 방법의 장점은 대부분의 브라우저와 모든 엘리먼트 요소에 적용이 가능하다는 점입니다. 해당 엘리먼트가 보이는 영역으로 스크롤이 이동합니다.
document.getElementById('nickname').scrollIntoView();


여기까지 몇 가지 방법들을 알아보았습니다.
​​​​​​​

Previous

자바스크립트 함수 오버로딩 구현하는 방법은?

Previous

classList 프로퍼티를 사용한 클래스 조작 방법들