반응형
<!DOCTYPE html>
<html>
<head>
<title>메뉴로 섹션 이동 예시</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
nav {
background-color: #333;
color: #fff;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
padding: 10px;
}
li a {
color: #fff;
text-decoration: none;
}
section {
height: 1000px;
padding: 20px;
}
#section1 {
background-color: #f0f0f0;
}
#section2 {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#section1">섹션 1</a></li>
<li><a href="#section2">섹션 2</a></li>
</ul>
</nav>
<section id="section1">
<h1>섹션 1</h1>
<p>이곳은 섹션 1의 내용입니다.</p>
</section>
<section id="section2">
<h1>섹션 2</h1>
<p>이곳은 섹션 2의 내용입니다.</p>
</section>
<script>
document.addEventListener("DOMContentLoaded", function() {
const menuLinks = document.querySelectorAll("a");
menuLinks.forEach(link => {
link.addEventListener("click", function(event) {
event.preventDefault();
const targetSectionId = link.getAttribute("href");
const targetSection = document.querySelector(targetSectionId);
targetSection.scrollIntoView({ behavior: "smooth" });
});
});
});
</script>
</body>
</html>간단한 메뉴를 이용하여 웹 페이지의 섹션으로 스크롤을 이동하는 예시입니다.
HTML, CSS 설명은 제외하고
JavaScript 설명만 추가하면
DOMContentLoaded 는 이벤트를 기다리고 이벤트가 발생하면 메뉴 링크들에 이벤트 리스너를 추가한다.
document.querySelectorAll("a")는 페이지 내의 모든 링크요소를 선택한다
menuLinks.forEach(...) 는 각 링크 요소에 대해서 반복문을 실행한다.
link.addEventListener("click", ...)은 각 링크에 클릭 이벤트 리스너를 추가한다.
event.preventDefault() 는 링크 클릭 시 기본동작(링크로 이동)을 막는다.
link.getAttribute("href")는 클릭된 링크의 'href' 속성 값을 가져온다 이는 해당 섹션의 ID를 말한다.
document.querySelector(targetSectionId)는 가져온 섹션 ID를 사용하여 해당 섹션을 선택한다.
targetSection.scrollIntoView( { behavior : "smooth" } ) 는 선택된 섹션으로 부드럽게 스크롤한다.
반응형
'JavaScript' 카테고리의 다른 글
| [JavaScript] 화면 크기에 따라 변하는 반응형 레이아웃 (0) | 2023.07.27 |
|---|---|
| [JavaScript] 자동으로 섹션 슬라이드 (0) | 2023.07.27 |
| [JavaScript] ES6 문법 개념 (0) | 2023.07.26 |
| [JavaScript] 버블링(Bubbling) (0) | 2023.07.26 |
| [JavaScript] HTML/CSS/JS 간단한 팝업창 만들기 (0) | 2023.07.26 |
