[JavaScript / jQuery] 특정 요소의 상/하단 위치 가져오기

화면을 가득 채운 메인 타이틀에서 컨텐츠가 있는 영역으로 자동스크롤 하는 기능을 구현하기 위해 요소의 하단 위치(스크롤이 이동할 위치)를 가져오는 방법을 알아보았다.

 

JavaScript

상단 위치 (top offset)

위치를 가져올 요소를 지정한 뒤 offsetTop 프로퍼티로 가져올 수 있다.

content 영역이 아닌 padding ~ border까지 포함된 가장자리 위치를 가져온다.

const destination = document.querySelector(".dest").offsetTop;

 

하단 위치

상단 위치에서 요소의 높이만큼 더해준다.

요소의 높이는 offsetHeight 프로퍼티로 받아올 수 있으며, 마찬가지로 padding, border까지를 포함한다.

const el = document.querySelector(".dest");
const bottomOfEl = el.offsetTop + el.offsetHeight;

 

 

jQuery

자바스크립트로 구할 때와 원리는 똑같다!

다만 jQuery는 offset을 반환하는 메서드를 사용한다.

상단 위치

const destination = $('.titleContainer').offset().top;

 

하단 위치

const bottomOffset = $('.titleContainer').offset().top + $('.titleContainer').outerHeight(true);