scrolltop()

.scrollTop()

선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다.

 

문법(Syntax)

$("선택자").scrollTop();
$("선택자").scrollTop("속성값");

정의(Definition)

• .scrollTop() 메서드는 선택한 요소에 세로 스크롤 값을 가져옵니다.
• .scrollTop("속성값") 메서드는 선택한 요소에 세로 스크롤 값을 변경합니다.

<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>