[HTML/Javascript] 페이지내 원하는 위치로 이동 하기 ( scrollTo , scrollBy 차이 )

개요

HTML 페이지 내에서 원하는 위치로 이동시키는 방법 중 특정 name의 엘리먼트를 찾아 이동하는 A 태그를 이용하는 방법과  위치를 기반으로 스크롤을 이동시키는 window 객체내 scrollTo, scrollBy 메서드를 이용하는 방법을 소개합니다.

<A> 태그 이용 

<A> 태그는 Anchor 의 약자로 닻을 의미하듯이 타겟으로 이동시키는 링크로서의 기능과 링크의 타깃이 되는 기능을 모두 수행합니다. 

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

그리고 또 다른 앵커태그를 생성하여 해당 "href" 속성을 추가하여 위 name을 지정해 주면 클릭시 위 <A> 엘리먼트 위치로 이동하게됩니다.

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

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 );">