[JavaScript] 자바스크립트 해당 위치로 이동하기

 

HTML 페이지 내에서 원하는 위치로 이동시키는 방법 두 가지

 

1. 특정 name의 엘리먼트를 찾아 이동하는 A 태그를 이용하는 방법

2. 위치를 기반으로 스크롤을 이동시키는 window 객체내 scrollTo, scrollBy 메서드를 이용하는 방법

 

---

1. <A> 태그 이용

 

<A> 태그는 Anchor 의 약자로 닻을 의미하듯이 타겟으로 이동시키는 

링크로서의 기능과 링크의 타깃이 되는 기능을 모두 수행한다.

먼저 이동을 시킬 곳(target)에 <A> 태그를 위치시키고 해당 엘리먼트에 "name" 속성을 지정해 준다.

그리고 또 다른 앵커태그를 생성하여 해당 "href" 속성을 추가하여 위 name을 지정해 주면 클릭시

위 <A> 엘리먼트 위치로 이동하게됩니다.

 

<a href="#target"> </a>  <!-- 클릭시 -->
..
..
..
<a name="target"> </a>  <!-- 해당 엘리먼트 위치로 이동 -->

 

 

 

2. window.scrollTo  /  window.scrollBy 이용

 

window 객체의 scrollTo scrollBy 이벤트 들을 사용하여  특정 엘리먼트가 아닌 위치를 기준으로 이동 시키는 방법도 있다.

window.scrollTo( X, Y ) 는 왼쪽 상단을 기준(절대위치)으로 하여 스크롤을 이동시키며,

window.scrollBy( X, Y ) 는 현재 위치를 기준(상대위치)으로 하여 스크롤을 이동시켜준다는 차이가 있다. 

 

// window의 왼쪽 모서리를 기준으로 가로200px, 세로300px 스크롤 이동 
window.scrollTo( 200, 300 );
// 현재 위치를 기준으로 가로200px, 세로300px 스크롤 이동
window.scrollBy( 200, 200 );

<a href="javascript:window.scrollTo( 0, 750 );">