반응형
안녕하세요. 경제적, 시간적 자유를 꿈꾸는 한량입니다.
jQuery의 .scrollTop() 사용법
jQuery의 .scrollTop() 함수는 스크롤바의 수직 위치를 픽셀 단위로
가져오거나 위치를 설정하는 용도로 사용됩니다.
간단한 예제로 버튼을 클릭시 scrollTop() 함수 어떻게 작동하는지 알아봅시다.
<!DOCTYPE html>
<html>
<head>
<title>scrollTop() 함수 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#container {
height: 200px;
}
</style>
<script>
// 스크립트 추가 부분
</script>
</head>
<body>
<div id="container">
<p>나 보기가 역겨워</p>
<p>가실 때에는</p>
<p>말없이 고이 보내 드리오리다.</p>
<br />
<p>영변(寧邊)의 약산(藥山)</p>
<p>진달래꽃</p>
<p>아름 따다 가실 길에 뿌리오리다.</p>
<br />
<p>가시는 걸음 걸음</p>
<p>놓인 그 꽃을</p>
<p>사뿐이 즈려밟고 사시옵소서</p>
<br />
<p>나 보기가 역겨워</p>
<p>가실 때에는</p>
<p>죽어도 아니 눈물 흘리오리다.</p>
</div>
<button>테스트 버튼</button>
</body>
</html>
1. scrollTop()
해당 요소의 스크롤 위치를 가져올 수 있습니다.
<script>
$(document).ready(function() {
$("button").click(function() {
var scrollTopPosition = $("#container").scrollTop();
alert(scrollTopPosition);
});
});
</script>테스트 버튼을 클릭하면 'container' 요소의 스크롤 위치를 alert를 통해 알려줍니다.
2. scrollTop(숫자)
해당 요소의 스크롤 위치를 숫자만큼 이동시킵니다.
<script>
$(document).ready(function() {
$("button").click(function() {
$("#container").scrollTop(100);
});
});
</script>테스트 버튼을 클릭하면 'container' 요소의 스크롤 위치를 100px으로 이동시킵니다.
반응형
'IT 소스 > jQuery' 카테고리의 다른 글
| [jQuery] .clone() - 요소를 복제 (0) | 2024.02.22 |
|---|---|
| [jQuery] .length - 선택한 요소의 개수를 반환 (0) | 2023.03.07 |
| [jQuery] .ajax() - 비동기적으로 데이터 처리 메서드 (0) | 2023.02.25 |
| [jQuery] .empty() - 선택한 요소의 내용을 지우는 메서드 (0) | 2023.02.22 |
| [jQuery] .each() - 선택한 요소의 함수를 반복 실행하는 메서드 (0) | 2023.02.21 |