Jquery[제이쿼리] scrollTop,scrollLeft 배우기

안녕하세요~ 주니주니 입니다.

오늘은 제이쿼리[jquery] scrollTop,scrollLeft 배워보겠습니다.

위화면처럼 준비해주세요~

실행 화면입니다.
오늘은 브라우저창의 막대기들 잘봐주세요~

===============================
$(window).click(function(){
  $(window).scrollTop(2100).scrollLeft(2000);
  alert("scrollTop :"+ $(window).scrollTop()+"px"+"  scrollLeft :"+$(window).scrollLeft()+"px");
  });
===============================
window창을 클릭하면 alert 사용하여 window창의 scrollTop()의값과 scrollLeft()값을 
alert 메서드를 이용하여 값을 찍도록 하였습니다.
※scrollTop이란 수직 스크롤 위치를 가지고 오거나 위치를 지정하는 메서드입니다.
※scrollLeft이란 수평 스크롤 위치를 가지고 오거나 위치를 지정하는 메서드입니다.

실행을 한뒤 브라우저창을 마우스로 클릭을하면 값이 나온답니다.
아직 수직/수평 스크롤을 움직이기전이라 둘다 0이란값이 찍혀있네요

이번에는 수직 스크롤을 움직인뒤 마우스로 클릭을 해보았습니다.
scrollTop값이 1572이라고 나오네요

수평 스크롤을 움직이고 클릭! 2533 이라고 나왔습니다.~

이번에는 값을 확인하는 문구를 주석처리하고 scrollTop은 2100으로 이동하고 scrollLeft는 2000으로
이동해보겠습니다.

마우스 클릭전!

클릭을 하니 <div class="d2">쪽으로 이동하였습니다.~

그럼 자주쓰이는 브라우저창의 UP버튼을 눌러 브라우저창의 맨위로 가도록 해보겠습니다.
위화면 처럼 준비해주시고! 실행을하면

맨아래에 있는 UP버튼을 눌러주면!

이런식으로 맨위로 오게된답니다~
오늘은 제이쿼리[jquery] scrollTop,scrollLeft 배워보았습니다.
그럼 다음에 또만나요~