q JQuery

[HTML_CSS] JQ - scrollTop() 메서드 ★ - 선택요소 세로 스크롤바 위치 설정/반환 (= scrollTop메서드 = 스크롤탑 메서드 = 스크롤톱 메서드) ※ 스크롤 스파이 ※스크롤 클래스토글

848

scrollTop() 예제 - 선택요소 세로 스크롤바 위치 반환

scrollTop() 정의

scrollTop() 구문

scrollTop() 예제 - 특정 세로 좌표로 이동

scrollTop() 예제 - 스크롤 배경색 변경 (= 스크롤 클래스 토글)

scrollTop() 예제 - 링크 클릭해 특정 수직좌표로 스크롤 이동

스크롤스파이 - 스크롤 높이에 따라 보이기/숨기기

scrollTop() 예제 - 선택요소 세로 스크롤바 위치 반환

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

alert($("div").scrollTop() + " px");

});

});

</script>

<style>

div {border:1px solid black;width:100px;height:150px;overflow-y:scroll}

</style>

<div>홈짱닷컴 Homzzang.com홈짱닷컴 Homzzang.com홈짱닷컴 Homzzang.com홈짱닷컴 Homzzang.com홈짱닷컴 Homzzang.com홈짱닷컴 </div>

<button>클릭</button>

결과보기

scrollTop() 정의

선택된 요소의 수직적 스크롤바 위치 반환/설정.

1.
스크롤바가 꼭대기에 있을 때, position 값은 0

2.
값 반환 경우: 처음 일치하는 요소
값 설정 경우: 모든 일치하는 요소

scrollTop() 구문

$(selector).scrollTop(position)

[매개변수]

position

스크롤바 수직위치를 반환. (픽셀단위)

scrollTop() 예제 - 특정 세로 좌표로 이동

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("div").scrollTop(100);

});

});

</script>

<style>

div {border:1px solid black;width:100px;height:150px;overflow:auto}

</style>

<div>

홈짱닷컴 Homzzang.com 홈짱닷컴 Homzzang.com 홈짱닷컴 Homzzang.com 홈짱닷컴 Homzzang.com 홈짱닷컴 Homzzang.com 홈짱닷컴 Homzzang.com 홈짱닷컴 Homzzang.com 홈짱닷컴 Homzzang.com 홈짱닷컴 Homzzang.com 홈짱닷컴 Homzzang.com

</div><br>

<button>클릭</button>

결과보기

scrollTop() 예제 - 스크롤 배경색 변경 (= 스크롤 클래스 토글)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function() {

$(window).scroll(function() {

if ($(document).scrollTop() > 100) {

$("p").addClass("hz");

} else {

$("p").removeClass("hz");

}

});

});

</script>

<style>

.hz {background-color: yellow;}

</style>

<body style="height:2000px;">

<p style="position:fixed;">홈짱닷컴 Homzzang.com</p>

</body>

결과보기

scrollTop() 예제 - 링크 클릭해 특정 수직좌표로 스크롤 이동

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("#hz").on('click', function(event) {

if (this.hash !== "") { // if열기

event.preventDefault();

var hash = this.hash;

$('html, body').animate({

scrollTop: $(hash).offset().top

}, 800, function(){

window.location.hash = hash;

});

} // if닫기

});

});

</script>

<style>

body, html, .main {height: 100%;}

section {min-height: 100%;}

</style>

<body>

<div class="main">

<section><a href="#section2" id="hz">홈짱닷컴 (클릭)</a></section>

</div>

<div class="main" id="section2">

<section style="background-color:coral">Homzzang.com</section>

</div>

</body>

결과보기

스크롤스파이 - 스크롤 높이에 따라 보이기/숨기기

<script src="https://code.jquery.com/jquery-latest.js"></script>

<style>

body {height:1000px; position:relative;}

#hz {position:fixed; bottom:0; display:none; border:1px solid red;}

</style>

<div id="hz">홈짱닷컴 Homzzang.com</div>

<script>

$(window).scroll(function () {

if ($(this).scrollTop() > 100) {

$('#hz').fadeIn();

} else {

$('#hz').fadeOut();

}

});

</script>

결과보기