요소의 위치 .offset() .position()

.offset() : fixed 같은 효과. 선택한 요소 집합의 첫 번째 요소의 위치를 HTML 문서를 기준으로 반환하거나, 선택한 요소의 위치를 인수로 전달받은 값으로 설정한다.

 

.position() : absolute 같은 효과. 선택한 요소 집합의 첫 번째 요소의 위치를 해당 요소가 웹 페이지에 위치할 때 기준이 되었던 부모 요소를 기준으로 하는 상대 위치를 반환한다.

 

What I am good at (".gnb li")

을 누르면

스크롤 이동하게 해보자

 

  $(".gnb li").eq(1).click(function(){
    var offTop = $(".goodAt").offset().top;
    $("html,body").animate({scrollTop:offTop});
  });

 

$(".gnb li").eq(1).click(function() : ".gnb li" 의 1번째 index를 클릭하면,

var offTop = $(".goodAt").offset().top; : ".goodAt"의 상위 높이를 담은 offTop 변수를 정해두고

$("html,body").animate({scrollTop:offTop}); : body의 맨위에서 offTop으로 위치이동한다.

 

 

각 탭마다 모두 함수를 걸어주기 번거롭다.

배열을 이용한다.

 

  $(".gnb li").click(function(){
    let index = $(this).index();
    let offTop = $("article").eq(index).offset().top;
    $("html,body").animate({scrollTop:offTop - 50});
  });

 

 

출처 : www.devkuma.com/books/pages/226

프로그램 개발 지식 공유, devkuma