[Javascript] 원하는 위치로 이동

div1로 이동

 

#2 : JQuery Import

 

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

 

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

 

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

 

 

(추가)

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

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

var offset = $("#div1").offset();

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

 

*offset

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

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

 

*position

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

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