728x90
[프론트엔드 / 자바스크립트] 스크롤 이동하기 window.ScrollBy window.ScrollTo
현재 좌표를 기준으로 전달된 좌표만큼 이동하고 싶다면
window.scrollBy(x,y)
전달된 좌표로 이동 하고 싶다면
window.scrollTo(x,y)
기본 형태
//현재 좌표값 + 전달된 좌표값
window.scrollBy(x,y)
//전달된 좌표값으로 이동
window.scrollTo(x,y)
샘플 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
.items {
display: flex;
flex-direction: column;
align-items: center;
background-color: lightsteelblue;
width: 260px;
}
.item {
background-color: lightgoldenrodyellow;
margin: 3px;
width: 250px;
height: 250px;
}
.btns {
position: sticky;
top: 0;
left: 0;
padding: 10px;
}
</style>
</head>
<body>
<div class="btns">
<input type="button" value="50px씩 아래로 이동하기" class="scrollBy" data-direction="bottom">
<input type="button" value="50px씩 위로 이동하기" class="scrollBy" data-direction="top">
<input type="button" value="500px로 이동하기" class="scrollTo" data-direction="500">
<input type="button" value="최상단 이동" data-direction="first">
<input type="button" value="최하단 이동" data-direction="last">
</div>
<div class="items">
<div class="item"></div>
<div class="item"></div>
<div class="item">500px 지점</div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
const scrollMove = (event) => {
if (event.target.dataset.direction === 'bottom')
window.scrollBy(0, 50);
else if (event.target.dataset.direction === 'top')
window.scrollBy(0, -50);
else if (event.target.dataset.direction === '500')
window.scrollTo(0, 500);
else if (event.target.dataset.direction === 'first')
window.scrollTo(0, 0);
else if (event.target.dataset.direction === 'last')
window.scrollTo(0, document.querySelector('body').scrollHeight);
}
document.querySelector('.btns').addEventListener('click', scrollMove);
</script>
</body>
</html>
출력 결과
728x90
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] 브라우저 윈도우 창 종료 이벤트 beforeunload / unload (0) | 2021.05.21 |
|---|---|
| [Javascript] script 태그 안에 defer란? (0) | 2021.05.21 |
| [프론트 엔드 / 자바스크립트] 좌표 값 구하기 (e.pageX / Y , e.clientX / Y ) (0) | 2021.05.21 |
| [프론트엔드 / 자바스크립트] 브라우저 엘리먼트 좌표 값 구하기 elem.getBoundingClientRect() (0) | 2021.05.20 |
| [프론트엔드] 윈도우 창 / 스크롤바 / 브라우저 사이즈 feat 자바스크립트 (0) | 2021.05.20 |
댓글