📖위치 조작 메서드
스크롤바 위치 메서드
scrollTop()메서드는 브라우저의 스크롤바가 수직으로 이동한 위치값을 불러오거나 변경할 때 사용한다.
scrollleft()메서드도 브라우저의 스크롤바가 수평으로 이동한 위칫값을 불러오거나 변경할 때 사용한다.
[기본형]
$(window).scrollTop(); $(window).scrollTop('새 값'); $(window).scrollLeft(); $(window).scrollLeft('새 값');-scrollTop(),scrollLeft()은 스크롤바가 수직으로 이동한 위칫값을 반환하고, 새 값이 들어오면 해당 위치로 스크롤을 이동시킨다.
let topNum = $("h1").offset().top;
console.log(topNum);
$(window).scrollTop(topNum);
//새 값(topNum)이 들어오면 해당 위치로 스크롤을 이동시킨다.
let sct = $(window).scrollTop();
console.log(sct);
});
//웹페이지에서 원하는 위치(섹션)로 스크롤해서 내려줄때 사용한다.
<style>
* {
margin: 0;
padding: 0;
}
body {
line-height: 1;
}
#wrap {
height: 5000px;
padding-top: 2000px;
}
</style>
</head>
<body>
<div id="wrap">
<h1>위치메서드</h1>
</div>
<script>
$(function () {
let topNum = $("h1").offset().top;
console.log(topNum);
$(window).scrollTop(topNum);
//새 값(topNum)이 들어오면 해당 위치로 스크롤을 이동시킨다.
let sct = $(window).scrollTop();
console.log(sct);
});
</script>변수 topNum에 h1태그의 위치값을 지정해준뒤, 브라우저에 해당하는 window에서 $(window).scrollTop()메서드로 위치값을 확인할 수 있다.
안녕하세요