jquery 를 이용해서 원하는 태그(위치)로 스크롤 이동하기
2016. 5. 11. 13:56ㆍlanguage/jquery
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 안에서의 위치 값을 반환한다. 부모 태그가 감싸져 있다면 부모태그를 기준으로 위치값을 반환한다. 상대좌표를 반환한다고 표현하기도 한다.
'language > jquery' 카테고리의 다른 글
| browser.msie 정의되지 않음 또는 null 참조인 'msie' 속성을 가져올 수 없습니다. (0) | 2016.12.15 |
|---|---|
| jquery javascript 문바열 바이트 체크 / 영문 한글 특수문자 등 / length / maxlength (0) | 2016.12.06 |
| page swiper plugin 추천 / 페이지 슬라이드 / 이미지 슬라이드 / 탭 슬라이드 / jquery mobile 호환 (0) | 2016.07.08 |
| [TIP] jquery selector 를 이용해서 여러 태그들에게 한번에 click 이벤트를 걸어보자. (0) | 2016.06.08 |
| jquery 를 이용하여 태그 좌표 구하기 (절대위치 구하기 / 태그 위치 구하기) (4) | 2016.05.19 |
| jquery 를 이용하여 화면 맨위로 자연스럽게 올라가는 TOP 버튼 만들기 (26) | 2016.04.21 |
| jquery form serialize 를 이용하여 json으로 만들기 (2) | 2016.04.15 |
| jquery ajax 를 이용한 간편 파일 업로드 ( fileObject 를 바로 업로드 하는 방식 ) (4) | 2016.04.08 |
| jquery / 말풍선 플러그인 / poshytip (0) | 2016.01.05 |
| jquery / input file tag / 파일명 / file name 구하기 (0) | 2016.01.05 |