[jQuery] 선택자의 절대위치(offset) 와 상대위치(position)

📍 버튼 누르면 scroll 이 움직이게 하기 !!

• 절대 위치
  • var offset = $('#div1').offset();  //선택한 태그의 위치의 절대적 위치를 반환.
  • console.log(offset);
    • // {top:58, left:0}
• 상대 위치
  • var pos = $("#div1").position(); //선택한 태그의 위치의 상대적 위치를 반환.
  • console.log(pos);
    • // {top:-116, left:0}

$(document).ready(function(){

   $('.down_btn').click(function(){
      var menusPos = $('.menus').position().top;
      menusPos = (menusPos * -1) + 58;
      $('.div_menu').animate({scrollTop : menusPos}, 400);
      console.log("down_btn--- " + menusPos);
   });


   $('.up_btn').click(function(){
      var menusPos = $('.menus').position().top;
      menusPos = (menusPos * -1) - 58;
      $('.div_menu').animate({scrollTop : menusPos}, 400);
      console.log("up_btn--- " + menusPos);
   });

});

 

 

 

---

출처 : 

https://webisfree.com/2014-09-07/[jquery]-%EC%A0%88%EB%8C%80%EC%A2%8C%ED%91%9C-%EB%B0%8F-%EC%83%81%EB%8C%80%EC%A2%8C%ED%91%9C-%ED%99%95%EC%9D%B8-%EB%B0%8F-%EC%9D%B4%EB%8F%99%ED%95%98%EA%B8%B0-offset()-position() 

 

https://appsnuri.tistory.com/411

 

 

 

---

개발 공부를 위한 블로그 입니다. 

오류가 있다면 댓글로 알려주세요! 

감사합니다.