스크롤 위치 구하기
window.pageXOffset
window.pageYOffset
- 윈도우 영역에서 스크롤된 위치 값을 구할 수 있다.
스크롤 위치 설정하기
window.scrollTo(x, y)
window.scrollBy(x, y)
- scrollTo() – 윈도우 영역에서 스크롤 위치를 x, y위치로 움직인다.
- scrollBy() – 현재 스크롤 위치에서 x, y만큼 움직인다.
스크롤 이벤트 처리하기
$(window).on(“scroll”, function(){ });
- 스크롤이 될 때마다 scroll 이벤트 발생한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window scroll</title>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function () {
$(window).on("scroll", function () {
var output = ""; // 출력 내용 저장
// 윈도우 스크롤 X 위치
output += "윈도우 스크롤 X 위치 = " + window.pageXOffset;
output += "<br>윈도우 스크롤 Y 위치 = " + window.pageYOffset;
$("#info").html(output);
});
$("#top").click(function () {
window.scrollTo(0, 0); // x,y 좌표에 지정한 위치로 스크롤
// 현재 위치에서 위로 100px 스크롤
// window.scrollTo(0, -100);
});
});
</script>
</head>
<body>
<div id="info">
스크롤 정보 출력
</div>
<div id="main">
00<br>01<br>02<br>03<br>04<br>05<br>06<br>07<br>08<br>09<br>
10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>
20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>
30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>
40<br>41<br>42<br>43<br>44<br>45<br>46<br>47<br>48<br>49<br>
50<br>51<br>52<br>53<br>54<br>55<br>56<br>57<br>58<br>59<br>
60<br>61<br>62<br>63<br>64<br>65<br>66<br>67<br>68<br>69<br>
70<br>71<br>72<br>73<br>74<br>75<br>76<br>77<br>78<br>79<br>
80<br>81<br>82<br>83<br>84<br>85<br>86<br>87<br>88<br>89<br>
90<br>91<br>92<br>93<br>94<br>95<br>96<br>97<br>98<br>99<br>
</div>
<button id="top">맨 위로 이동</button>
</body>
</html>
728x90
반응형
'HTML > Javascript 기초' 카테고리의 다른 글
| [Javascript] 지정한 위치로 물고기 이동시키기 (0) | 2020.08.07 |
|---|---|
| [Javascript] 웹페이지에서 마우스 위치 표시하기 (0) | 2020.08.07 |
| [Javascript] 배너 이동하기 (0) | 2020.08.06 |
| [Javascript] 윈도우 창 크기 변경하고 이동하기 (0) | 2020.08.06 |
| [Javascript] 스크롤 위치 구하기 (0) | 2020.08.06 |
