[Javascript] div 요소의 top(시작) 위치 알아내기

현재 브라우저에서 얼마나 스크롤 이동 했는지 확인

var winX = window.pageXOffset;
var winY = window.pageYOffset;

 

현재 보고있는 화면 기준으로 특정 요소의 위치 알아내기

var div = document.getElementById("div_id");
var divTop = div.getBoundingClientRect().top;
var divBottom = div.getBoundingClientRect().bottom;
var divLeft = div.getBoundingClientRect().left;
var divRight = div.getBoundingClientRect().right;

또 다른 방법.

var divTop = document.querySelector("#div_id").offsetTop;

 

특정 요소의 절대좌표 알아내기

offset의 경우, 절대좌표가 아니라 가장 가까운 relative 속성을 가진 부모요소를 기준으로 상대위치를 구하는 것이다.

만약 부모요소 중에 relative가 적용되어있는 요소가 없다면, 최상위까지 올라가게 되어 최상위 요소의 시작 위치(0,0)부터 좌표가 시작하기 때문에 절대좌표 위치를 구할수가 있다.

하지만 상위로 올라가는 도중에 relative가 적용되어있는 부모요소가 있다면, 그 요소의 시작점부터 좌표위치가 시작되므로 정확한 절대좌표를 알아낼수가 없다.

아래 예제는 스크롤 이동거리 + 현재화면 기준 상대경로 값으로 절대경로를 구하는 방법이다.

var div = document.getElementById("div_id");
var divTop = div.getBoundingClientRect().top;
var absoluteTop = window.pageYOffset + div.getBoundingClientRect().top;

 

해당 요소로 스크롤 하기

//상단에 fixed 메뉴영역이 있다면, 메뉴때문에 메뉴의 높이만큼 스크롤이 가려질 수 있다.
var menuHeight = document.querySelector(".menu").offsetHeight; // 메뉴의 높이
var divTop = document.querySelector("#div_id").offsetTop; // 스크롤 위치

//메뉴의 높이만큼 빼서 스크롤을 메뉴 높이만큼 올라가게 해준다.
window.scrollTop({top:divTop - menuHeight, behavior:'smooth'});

스크롤 다른 방법

document.getElementById('div_id').scrollIntoView();