[jQuery] 선택 요소의 좌표 .offset()

.offset()

 

문서를 기준으로 요소의 현재 위치를 가져오는 데 사용됩니다.

.offset()방법은 다음과 같이 사용될 수 있습니다.

• 요소가 처음 로드될 때 요소의 위치를 ​​가져옵니다.
• 스크롤되거나 애니메이션될 때 요소의 움직임을 추적합니다.
• 다른 요소를 기준으로 요소를 배치합니다.

 

좌표를 가져오기

다음 코드는 ID가 있는 요소의 위치를 ​​가져옵니다

var offset = $(myElement).offset();

console.log(offset.top); 
console.log(offset.left);

 

위치 설정하기

.offset()메서드를 사용하여 요소의 위치를 ​​설정할 수도 있습니다.

예를 들어 다음 코드는 ID가 있는 요소를 myElement문서의 왼쪽 상단으로 이동합니다.

$(myElement).offset({top: 0, left: 0});

 

염두에 두어야 할 주의사항

• 이 .offset()메서드는 여백을 제외한 요소의 테두리 상자 위치를 반환합니다.
• 요소의 위치가 상대적이거나 절대적인 경우 .offset()메서드는 해당 offsetParent를 기준으로 요소의 위치를 ​​반환합니다.
• .offset()숨겨진 요소에는 이 방법이 작동하지 않습니다.

 

응용 예제 (스크롤바 위치 변경하기)

아래는 찾은 요소의 위치에 스크롤바를 위치하게 하는 방법 입니다.

 

1. 찾은 요소의 offset() 메서드를 사용하여 요소의 위치를 가져옵니다.
2. scrollTop() 메서드를 사용하여 스크롤바의 위치를 설정합니다.

<div id="myDiv">This is my div</div>

$(document).ready(function() {
  // 찾은 요소의 위치를 가져옵니다.
  var offset = $("#myDiv").offset();

  // 스크롤바의 위치를 설정합니다.
  $("html, body").scrollTop(offset.top);
});

 

스크롤바를 부드럽게 이동하려면 animate() 메서드를 사용할 수 있습니다.

$(document).ready(function() {
  // 찾은 요소의 위치를 가져옵니다.
  var offset = $("#myDiv").offset();

  // 스크롤바의 위치를 부드럽게 이동합니다.
  $("html, body").animate({
    scrollTop: offset.top
  }, 500);
});