스크롤바 위치 메서드
- scrollTop메서드
: 브라우저의 스크롤바가 수직으로 이동한 위치값을 불러오거나 변경할 때 사용한다.
[기본형]
$(window).scrollTop();
: 스크롤바가 수직으로 이동한 위치값을 반환
$(window).scrollTop('새 값');
: 가로 안에 새 값이 들어오면 해당 위치로 스크롤을 이동시킨다.
- scrollLeft메서드
: 브라우저의 스크롤바가 수평으로 이동한 위치값을 불러오거나 변경할 때 사용한다.
[기본형]
$(window).scrollLeft();
: 스크롤바가 수평으로 이동한 위치값을 반환
$(window).scrollLeft('새 값');
: 가로 안에 새 값이 들어오면 해당 위치로 스크롤을 이동시킨다.
<body>
<div id="wrap">
<h1>위치 메서드</h1>
<style>
* {
margin: 0;
padding: 0;
}
body {
line-height: 1;
}
#wrap {
height: 5000px;
padding-top: 2000px;
}
</style>
//h1이 문서기준으로 어느 위치에 있는지를 반환 .offset()를 사용해서 위치값을 가져온다.
let topNum = $("h1").offset().top;
console.log(topNum); //2000 패딩 탑 2000 넣어놓았기때문
//스크롤바를 내가 원하는 위치로 수직이동시킴. 브라우저를 열면 그 자리에 가있다.
$(window).scrollTop(topNum); //2000을 topNum이 가지고 있으니깐
//이동한 스크롤의 위치 확인
let sct = $(window).scrollTop();
console.log(sct); //2000이 나온다.
