Javascript & JQuery & CSS

.offset() 함수는 어떤 요소의 문서 상의 상대적인 현재 위치를 알 수 있습니다.
부모 요소를 기준으로 한 상대적인 위치를 알아내는 .position()과는 다소 대비됩니다.
전역(global) 조작(특히, 드래그앤드롭을 구현하기 위해)으로 새로운 요소를 기존의 요소에 위치하기 위해서는 .offset() 함수가 더 유용합니다.

.offset() 함수는 객체의 속성 중 top 과 left 값을 반환해 줍니다.

Note: jQuery는 숨은 요소 또는 body 요소의 borders, margin, padding 값에 대한 내용은 얻어낼 수 없습니다.
 

var p = $("p:last"); 
var offset = p.offset(); 
p.html( "left: " + offset.left + ", top: " + offset.top );

위와 같은 형태로 사용할 수 있는데요. 마지막 <p> 태그의 left, top 위치를 얻어 낼 수 있습니다.


예제) offset()을 이용한 부드러운 스크롤 이동

원하는 위치로 부드럽게 스크롤 되는 예제는 아래와 같습니다.

<div id="cont">본문 내용...</div>

<a href="#cont" class="scroll">부드럽게 본문내용으로 이동</a>
 

jQuery(document).ready(function($){
	$(".scroll").click(function(event){	
		event.preventDefault();
	        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);

		//offset()함수로 위치를 찾음
	});
}); 

animate() 을 사용하여 처리할 수 있습니다.