코드랩 레퍼런스
.scrollTop() 본문
.scrollTop() 메서드는 선택한 요소의 가로 스크롤 값을 설정하거나 반환합니다.
Definition
- .scrollTop() 메서드는 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다.
Syntax
$(selector).scrollTop();
Compatibility
 |
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| .scrollTop() |
Sample 선택한 요소의 속성 값을 가져옵니다.
offset().left = 0px
offset().top = 0px
position().left = 0px
position().top = 0px
scrollLeft = 0px
scrollTop = 0px
offset().top = 0px
position().left = 0px
position().top = 0px
scrollLeft = 0px
scrollTop = 0px
Drag
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리(jQuery) : offset()</title>
<style>
* { margin:0; padding:0;}
body {width:2000px; height:3000px; }
#box {position:absolute; width:100px; height:100px; left:50%; top:50%; background:#f06292; color:white; text-align: center; line-height: 100px; cursor: pointer; margin-left: -50px; margin-top: -50px; border-radius:50%}
#info {position: fixed; left: 10px; top: 10px;}
</style>
</head>
<body>
<div id="info">
<span>offset().left = </span><span class="offset_left">0</span>px<br>
<span>offset().top = </span><span class="offset_top">0</span>px<br>
<span>position().left = </span><span class="position_left">0</span>px<br>
<span>position().top = </span><span class="position_top">0</span>px<br>
<span>scrollLeft = </span><span class="scroll_left">0</span>px<br>
<span>scrollTop = </span><span class="scroll_top">0</span>px<br>
</div>
<div id="box">Drag</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$('#box').draggable({
drag:function(){
$('.offset_left').text($('#box').offset().left);
$('.offset_top').text($('#box').offset().top);
$('.position_left').text($('#box').position().left);
$('.position_top').text($('#box').position().top);
}
});
$(window).on("scroll",function(){
$(".scroll_left").text($(window).scrollLeft());
$(".scroll_top").text($(window).scrollTop());
});
</script>
</body>
</html>
Related Articles
more
Ad
Comments