목차
- 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://code.jquery.com/jquery-latest.js"></script>
<textarea style="height:200px" id="hz">...</textarea>
<script>
$(document).ready(function(){
var hzHeight = $("#hz").prop('scrollHeight');
$("#hz").scrollTop(hzHeight);
});
</script>
결과보기
Mins아빠 님 (230727) https://sir.kr/qa/506768
스크롤스파이 - 스크롤 높이에 따라 보이기/숨기기
<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>
결과보기
링크 클릭해 특정 수직좌표로 스크롤 이동
<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>
결과보기
<style>
.menu {position: fixed; right: 0;}
.gap {height: 1000px;}
section>div {height: 30em;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$(".menu li a").click(function(event) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).position().top
}, 500);
});
});
</script>
<ul class="menu">
<li><a href="#hz_1">홈</a></li>
<li><a href="#hz_2">짱</a></li>
<li><a href="#hz_3">닷</a></li>
<li><a href="#hz_4">컴</a></li>
</ul>
<div class="gap"></div>
<section>
<div id="hz_1"><h4>홈</h4></div>
<div id="hz_2"><h4>짱</h4></div>
<div id="hz_3"><h4>닷</h4></div>
<div id="hz_4"><h4>컴</h4></div>
</section>
결과보기
