.scrollTop()
선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다.
.scrollTop()
선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다.
문법(Syntax)
$("선택자").scrollTop();
$("선택자").scrollTop("속성값");
정의(Definition)
- .scrollTop() 메서드는 선택한 요소에 세로 스크롤 값을 가져옵니다.
- .scrollTop("속성값") 메서드는 선택한 요소에 세로 스크롤 값을 변경합니다.
Sample1 
.scrollTop() : Div 박스의 스크롤 값과 브라우저의 스크롤 값을 구하는 예제입니다.
Sample1
속성(ATTRIBUTES)
square
"square" scrollLeft() = 0
"square" scrollTop() = 0
"브라우저" scrollLeft() = 0
"브라우저" scrollTop() = 0
jquery
$(".choice1 .btn1").click(function(e){
e.preventDefault();
$(".list1 .desc .sl").text( $(".list1 .square").scrollLeft() + "px" );
});
$(".choice1 .btn2").click(function(e){
e.preventDefault();
$(".list1 .desc .st").text( $(".list1 .square").scrollTop() + "px" );
});
$(".choice1 .btn3").click(function(e){
e.preventDefault();
$(".list1 .desc .bl").text( $(window).scrollLeft() + "px" );
});
$(".choice1 .btn4").click(function(e){
e.preventDefault();
$(".list1 .desc .bt").text( $(window).scrollTop() + "px" );
});html
<h3>속성(ATTRIBUTES)</h3>
<div class="list1">
<div class="square">square</div>
<p class="desc">
<span>scrollLeft() = </span><span class="sl">0</span><br>
<span>scrollTop() = </span><span class="st">0</span><br>
<span>scrollLeft() = </span><span class="bl">0</span><br>
<span>scrollTop() = </span><span class="bt">0</span><br>
</p>
</div>Total
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery Sample</title>
<style>
.square {width: 100%; height: 300px; line-height: 300px; text-align: center; color: #c7254e; background-color: #f9f2f4; border-radius: 3px; border: 1px dashed #a51a3d;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
</style>
</head>
<body>
<h3>속성(ATTRIBUTES)</h3>
<div class="list1">
<div class="square">square</div>
<p class="desc">
<span>scrollLeft() = </span><span class="sl">0</span><br>
<span>scrollTop() = </span><span class="st">0</span><br>
<span>scrollLeft() = </span><span class="bl">0</span><br>
<span>scrollTop() = </span><span class="bt">0</span><br>
</p>
</div>
<div class="choice1">
<a href="#" class="off1">리셋</a><br>
<a href="#" class="btn1">클릭하면 원의 square의 <em>scrollLeft()</em> 좌표값을 표현합니다.</a>
<a href="#" class="btn2">클릭하면 원의 square의 <em>scrollTop()</em> 좌표값을 표현합니다.</a><br>
<a href="#" class="btn3">클릭하면 원의 브라우저의 <em>scrollLeft()</em> 좌표값을 표현합니다.</a>
<a href="#" class="btn4">클릭하면 원의 브라우저의 <em>scrollTop()</em> 좌표값을 표현합니다.</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".choice1 .off1").click(function(e){
e.preventDefault();
$(".sl,.st,.bl,.bt").text("0");
});
$(".choice1 .btn1").click(function(e){
e.preventDefault();
$(".list1 .desc .sl").text( $(".list1 .square").scrollLeft() + "px" );
});
$(".choice1 .btn2").click(function(e){
e.preventDefault();
$(".list1 .desc .st").text( $(".list1 .square").scrollTop() + "px" );
});
$(".choice1 .btn3").click(function(e){
e.preventDefault();
$(".list1 .desc .bl").text( $(window).scrollLeft() + "px" );
});
$(".choice1 .btn4").click(function(e){
e.preventDefault();
$(".list1 .desc .bt").text( $(window).scrollTop() + "px" );
});
</script>
</body>
</html>Sample2
.scrollTop() : 브라우저의 스크롤 값을 구하는 예제입니다.
결과
속성(ATTRIBUTES)
0 px
0 px
스크롤을 하면 scrollLeft(), scrollTop() 좌표값을 표현합니다.
jquery
$(window).scroll(function(){
var lScroll = $(this).scrollLeft();
$(".scroll_left").text(lScroll);
});
$(window).scroll(function(){
var tScroll = $(this).scrollTop();
$(".scroll_top").text(tScroll);
});html
<h3>속성(ATTRIBUTES)</h3>
<div class="list2">
<div class="circle">
<span class="scroll_left">0</span> px
</div>
<div class="circle">
<span class="scroll_top">0</span> px
</div>
</div>Total
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery Sample</title>
<style>
.circle {width: 100px; height: 100px; color: #c7254e; background-color: #f9f2f4; border-radius: 50%; border: 1px dashed #a51a3d; text-align: center; line-height: 100px; display: inline-block;}
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
body {width: 5000px; height: 5000px;}
</style>
</head>
<body>
<h3>속성(ATTRIBUTES)</h3>
<div class="list2">
<div class="circle">
<span class="scroll_left">0</span> px
</div>
<div class="circle">
<span class="scroll_top">0</span> px
</div>
</div>
<div class="choice2">
스크롤을 하면 <em>scrollLeft()</em>, <em>scrollTop()</em> 좌표값을 표현합니다.
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(window).scroll(function(){
var lScroll = $(this).scrollLeft();
$(".scroll_left").text(lScroll);
});
$(window).scroll(function(){
var tScroll = $(this).scrollTop();
$(".scroll_top").text(tScroll);
});
</script>
</body>
</html>호환성(Compatibility)
| 메서드 | 버전 |  |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| scrollTop() | jQeury 1.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| jQeury 2.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | |
| jQeury 3.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
