language/jquery
jquery 를 이용해서 원하는 태그(위치)로 스크롤 이동하기
CofS
2016. 5. 11. 13:56
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 안에서의 위치 값을 반환한다. 부모 태그가 감싸져 있다면 부모태그를 기준으로 위치값을 반환한다. 상대좌표를 반환한다고 표현하기도 한다.