스마트웹앱콘텐츠전문가/자바스크립트

절대 좌표 확인 + 이동함수

9D4U 2019. 5. 20. 15:49
728x90
반응형

1. offset() - 절대좌표 확인 및 이동함수 -> cf)상대좌표 position()

- 절대 좌표 확인 :
예시) var a = $('.apoint'); //선택자
      a.offset().top; //상단을 기준으로 해당 선택자 요소가 위치한 거리를 절대좌표로 나타냄
      a.offset().left; //좌측을 기준으로 해당 선택자 요소가 위치한 거리를 절대좌표로 나타냄

- 해당 요소 이동 :
예시) var a = $('.apoint'); //선택자
      a.offset({top: 100, left: 200}); //절대좌표를 기준으로 상단에서 100px, 좌측에서 200px에 해당하는 좌표로 이동.

cf)offset() vs animate()
- offset은 순간적으로 이동시킬 수 있는 반면, animate는 동작시간을 지정하여 이동할수 있음.

 

※ 원하는 위치로 이동시키기(절대 좌표 즉, offset 사용)

예시) var atop = $('.apoint).offset().top;

       $('html, body').animate({scrollTop : atop}, 300);

728x90