스크롤바 위치 메서드
1) scrollTop()
scrollTop() : 브라우저의 스크롤바가 수직/수평으로 이동한 위치값을 불러오거나 변경할 때 사용
기본형
$("요소선택").scrollTop(); $("요소선택").scrollLeft(); 스크롤바가 이동한 위치값 반환
$("요소선택").scrollTop(새 값); $("요소선택").scrollLeft(새값); 입력한 수치만큼 스크롤바 이동
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
let topNum = $('h1').offset().top;
// offset.top 을 이용해 h1 태그의 상단에서 문서의 상단까지의 거리를 픽셀로 계산하여 저장
console.log(topNum);
// $(window).scrollTop(topNum); 수치만큼 스크롤바 이동
$("html, body").animate({ scrollTop: topNum}); // 스크롤 이동하는 것을 보기위해 animate() 사용
let sct = $(window).scrollTop(); // 스크롤의 현재위치를 반환
console.log(sct); //2000
});
</script>
<style>
* {
margin: 0;
padding: 0;
}
body {
line-height: 1;
}
#wrap {
height: 5000px;
padding-top: 2000px;
}
</style>
</head>
<body>
<div id="wrap">
<h1>위치 메서드</h1>
</div>
</body>
</html>
