자기소개 페이지를 제작하다가 네비게이션에 있는 섹션을 클릭하면 해당 섹션으로 이동하는 효과를 추가하고 싶어졌다.
index.html
<!DOCTYPE html>
<html lang="ko">
<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" />
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<title>포트폴리오</title>
</head>
<body>
<nav>
<span id="navHome">home</span>
<span id="navAbout">about</span>
<span id="navSkills">skills</span>
<span id="navPortfolio">portfolio</span>
<span id="navContact">contact</span>
</nav>
<section id="home">home</section>
<section id="about" style="background-color: #2e2e30">about</section>
<section id="skills">skills</section>
<section id="portfolio" style="background-color: #2e2e30">
portfolio
</section>
<section id="contact">contact</section>
<script type="text/javascript" src="index.js"></script>
</body>
</html>먼저 네비게이션과 각각 하나의 페이지가 될 섹션을 준비한다.
style.css
/* 네비게이션 */
...
nav {
z-index: 99;
color: black;
position: fixed;
right: 2%;
top: 40%;
display: flex;
flex-direction: column;
font-size: 0.5em;
font-weight: bold;
}
nav span {
text-align: center;
margin-top: 10px;
border: 2px solid black;
border-radius: 50px;
padding: 10px;
border-color: beige;
background-color: beige;
}
nav span:hover {
background-color: bisque;
cursor: pointer;
}
...네비게이션도 적당한 css를 입혀준다.
(제작 마무리단계에서 글을 작성하느라 앞뒤 css는 생략하고 네비게이션 부분만 잘라넣었다.)
index.js
//네비게이션 버튼 클릭시 화면 이동
document.querySelector("#navHome").addEventListener("click", (e) => {
document.querySelector("#home").scrollIntoView({ behavior: "smooth" });
});
document.querySelector("#navAbout").addEventListener("click", (e) => {
document.querySelector("#about").scrollIntoView({ behavior: "smooth" });
});
document.querySelector("#navSkills").addEventListener("click", (e) => {
document.querySelector("#skills").scrollIntoView({ behavior: "smooth" });
});
document.querySelector("#navPortfolio").addEventListener("click", (e) => {
document.querySelector("#portfolio").scrollIntoView({ behavior: "smooth" });
});
document.querySelector("#navContact").addEventListener("click", (e) => {
document.querySelector("#contact").scrollIntoView({ behavior: "smooth" });
});마지막으로 각각의 span 태그를 클릭했을 때 해당하는 페이지로 이동되도록 자바스크립트를 추가하였다.
id = navHome인 span을 클릭하면 scrollIntoView 함수를 통해 지정한 태그의 위치로 이동한다.
결과
