[JQuery] 원하는 태그(위치)로 이동

 

 

 

특정 태그가 있는 곳까지 자동으로 스크롤이 되서 이동해야 하는 경우가 있다.

 

 <script>     function fnMove(seq){         var offset = $("#div" + seq).offset();         $('html, body').animate({scrollTop : offset.top}, 400);     } div1로 이동 div2로 이동 div3로 이동

div1

div2

div3

 

#2 : JQuery Import

 

#3 : 스크롤 이동할 함수 작성

 

#4 : 이동하고 싶은 태그를 선택하여 offset()함수를 이용하여 절대좌표가 있는 객체를 가져온다.

 

#5 : JQuery animate의 scrollTop 함수를 이용하여 절대좌표 top 위치로 이동한다. (400은 이동시간)

 

 

(추가)

위 소스는 해당 div의 가장 맨위로 이동한다.

아래는 해당 div의 중간에 위치하도록 하는 방법이다.

var offset = $("#div" + seq).offset(); var winH = $(window).height(); $('html, body').animate({scrollTop : (offset.top - winH/2)}, 400);

 

*

offset

   - document 안에서의 위치 값을 반환한다. 쉽게 말해 페이지 전체를 기준으로 위치값을 반환한다. 

   - 절대좌표를 반환한다고 표현하기도 한다.

 

*

position

   - DOM 안에서의 위치 값은 반환한다. 부모 태그가 감싸져 있다면 부모태그를 기준으로 위치값을 반환한다.

   - 상대좌표를 반환한다고 표현하기도 한다.

 

 

 

출처: http://cofs.tistory.com/191 [CofS]