.scrollTop()
원문 링크 
http://api.jquery.com/scrollTop/
함수들
scrollTop()
- scrollTop()
scrollTop( value )
- .scrollTop( value )
개요 : 조건에 일치하는 요소들 중 첫번째 요소의 스크롤바의 수직 위치(y좌표)를 얻을 수 있습니다.
- .scrollLeft()
수직(세로) 스크롤의 위치는 픽셀 수치입니다. 스크롤바가 아주 위쪽에 있거나 더이상 스크롤이 되지 않으며 그 수치는 0이 됩니다.
예 제
문단의 scrollLeft를 구해봅시다.
<!DOCTYPE html>
<html>
<head>
<style>
p { margin:10px;padding:5px;border:2px solid #666; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p><p></p>
<script>var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
</script>
</body>
</html>미리보기
개요 : 조건에 일치하는 요소들의 수직 스크롤의 위치를 value값으로 세팅합니다.
- .scrollTop( value )
- value 정수값
예 제
div의 스크롤을 움직여 볼까요.
<!DOCTYPE html>
<html>
<head>
<style>
div.demo {
background:#CCCCCC none repeat scroll 0 0;
border:3px solid #666666;
margin:5px;
padding:5px;
position:relative;
width:200px;
height:100px;
overflow:auto;
}
p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="demo"><h1>lalala</h1><p>Hello</p></div>
<script>$("div.demo").scrollTop(300);
</script>
</body>
</html>
미리보기
보시는 것처럼 세로 스크롤이 300만큼 움직였네요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 요소 감싸기, wrap() (0) | 2011.11.22 |
|---|---|
| jQuery API 정복 - 감싼 요소 제거하기, unwrap() (0) | 2011.11.22 |
| jQuery API 정복 - class 토글하기, toggleClass() (0) | 2011.11.22 |
| jQuery API 정복 - 텍스트만 알아내기, text() (5) | 2011.11.22 |
| jQuery API 정복 - 수평 스크롤 이동, scrollLeft() (0) | 2011.11.22 |
| jQuery API 정복 - 요소 바꾸기, replaceWith() (0) | 2011.11.22 |
| jQuery API 정복 - 요소 바꾸기, replaceAll() (2) | 2011.11.22 |
| jQuery API 정복 - property 제거, removeProp() (0) | 2011.11.22 |