jquery 를 이용해서 원하는 태그(위치)로 스크롤 이동해 보자.
맨 아래에서 절대위치와 상대위치를 구하는 offset 함수와 position 함수에 대해서 간단히 설명한다.
특정 태그가 있는 곳까지 자동으로 스크롤이 되서 이동해야 하는 경우들이 종종 있다.
그럴 경우에 쉽게 사용할 수 있는 방법이다.
소스를 직접 설명한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <HTML> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <style> div {margin-bottom:1000px;} </style> <script> function fnMove(seq){ var offset = $("#div" + seq).offset(); $('html, body').animate({scrollTop : offset.top}, 400); } </script> <BODY> <button onclick="fnMove('1')">div1로 이동</button> <button onclick="fnMove('2')">div2로 이동</button> <button onclick="fnMove('3')">div3로 이동</button> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> </BODY> </HTML> | cs |
2# : jquery import
4# : 임의로 div 태그들의 간격을 margin-bottom 을 이용하여 줌 (스크롤이 생기도록 하기 위해서)
7# : 스크롤 이동을 할 함수
8# : 이동하고 싶은 태그를 선택하여 offset() 함수를 이용하여 절대좌표가 있는 객체를 가져온다. (아래 설명 참고)
9# : jquery animate의 scrollTop 함수를 이용하여 절대좌표 top 위치로 이동한다. (400 은 이동되는 시간)
태그의 위치를 가져오는 함수는 offset, position 이 있다.
두 함수의 차이점에 대해 간단히 설명하겠다.
offset : document 안에서의 위치 값을 반환한다. 쉽게 말해 페이지 전체를 기준으로 위치값을 반환한다. 절대좌표를 반환한다고 표현하기도 한다.
position : DOM 안에서의 위치 값을 반환한다. 부모 태그가 감싸져 있다면 부모태그를 기준으로 위치값을 반환한다. 상대좌표를 반환한다고 표현하기도 한다.
'jquery소스' 카테고리의 다른 글
| 상하 스크롤 발생해주는 jquery vticker (0) | 2016.11.10 |
|---|---|
| 퍼블리셔 슬라이드 (0) | 2016.11.01 |
| 툴팁 jquery / tooltipsy.min.js (0) | 2016.10.28 |
