티스토리 뷰
안녕하세요. 자바스크립트 예제 포스팅입니다. 마우스 커서로 특정 요소를 클릭하면 스크롤이 정해진 위치로 이동하는 동작을 구현해보았고요. HTML, CSS, JavaScript 순서로 하나씩 코드를 살펴보겠습니다. 코드가 무척 간단하므로 이해하기 어렵지 않으실 것 같지만, DOM에 대한 이해가 부족하신 분들에게는 다소 어렵게 느껴지실 수 있습니다(직접 해보지 않고 코드만 읽어 볼 경우에도 어렵게 느껴집니다, 꼭 직접 해보세요!). 해당 코드에 대한 설명은 제 유튜브에서 동영상으로도 만나보실 수 있으니 참고해주세요. 감사합니다.
=> https://youtu.be/r3G0U5fva1c
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML 문서</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="menu">
<span>1번</span><span>2번</span><span>3번</span>
</div>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<script src="ClickToMove.js"></script>
</body>
</html>
|
09 ~ 11 : 클래스가 menu인 이유는 이 안에 들어 있는 span 요소를 클릭할 때마다 각각 정해진 위치로 스크롤을 이동할 것이기 때문입니다.
12 ~ 14 : 클래스가 content인 요소 세 개는 menu 안에 들어있는 각각의 span에 대응하는 요소들입니다. 예를 들어 2번 span 요소를 누르면 두 번째 content로 이동하게 됩니다.
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
*{ box-sizing: border-box; }
body{ margin: 0; }
.menu{
width: 200px; height: 50px;
position: fixed; left: 50px;
border-radius: 0 0 30px 30px;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: space-around;
align-items: center;
color: white;
}
.menu > span:hover{
border-bottom: 3px solid white;
cursor: pointer;
}
.content{
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
div:nth-child(2){ background-color: coral; }
div:nth-child(3){ background-color: violet; }
div:nth-child(4){ background-color: teal; }
|
05 : fixed 포지션 요소를 왼쪽에서 50px 정도 떨어진 자리에 고정시켜 둡니다.
23 ~ 25 : div 형제 중 첫 번째 요소는 menu로 사용되고 있으므로 두 번째 요소부터 색깔을 구분해줍니다.
JavaScript
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
const spans = document.querySelectorAll("span")
const contents = document.querySelectorAll(".content")
const firstTop = contents[0].offsetTop
const secondTop = contents[1].offsetTop
const thirdTop = contents[2].offsetTop
spans[0].onclick = function(){
window.scroll({top:firstTop, behavior: 'smooth'})
}
spans[1].onclick = function(){
window.scroll({top:secondTop, behavior: 'smooth'})
}
spans[2].onclick = function(){
window.scroll({top:thirdTop, behavior: 'smooth'})
}
|
01 : 문서에는 세 개의 span 요소가 있는데, 모두 메뉴 버튼 역할을 하는 요소들입니다. 이들을 모두 선택했습니다.
02 : 세 개의 content를 모두 선택했습니다.
03 ~ 05 : offsetTop은 요소의 윗면이 브라우저 화면 맨 위에서 얼만큼 떨어져 있는지, 즉 스크롤을 얼만큼 이동시켜야 해당 요소를 볼 수 있는지를 숫자로 보여주는 속성입니다. 세 개의 content 각각의 offsetTop을 저장해둡니다.
08 : window 객체의 scroll 메소드를 사용해 스크롤을 이동시킵니다. 이때 전달되는 객체의 top 키는 스크롤을 브라우저 화면 맨 위에서 얼만큼 이동시킬 것인지를 의미하는 키이고, behavior는 동작을 smooth(부드럽게)하게 가져갈지 auto(바로 이동)로 이동할지 결정하는 키입니다.
'IT > 프로그래밍' 카테고리의 다른 글
| 명령행에서 PSSecurityException:UnauthorizedAccess 오류 발생했을 때 해결하는 법 (0) | 2021.09.15 |
|---|---|
| [JavaScript DOM] append appendChild 차이 (0) | 2021.08.24 |
| [JavaScript DOM] DOM 이란 무엇일까? (0) | 2021.06.04 |
| [JavaScript DOM] textContent innerText 차이 (0) | 2021.05.11 |
| 자바스크립트 스톱워치 만들기 (3) | 2021.04.29 |