자바스크립트 마우스 클릭으로 스크롤 이동하기 예제!!
안녕하세요. 자바스크립트 예제 포스팅입니다. 마우스 커서로 특정 요소를 클릭하면 스크롤이 정해진 위치로 이동하는 동작을 구현해보았고요. 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(바로 이동)로 이동할지 결정하는 키입니다.