반응형
아래 소스 코드는 앵커를 사용하여 페이지의 특정 섹션으로 이동하는 예제입니다.
앵커(anchor)는 웹 페이지의 특정 위치로 바로 이동할 수 있도록 하는 HTML 요소입니다.
예제
1. 페이지 로드 시 앵커 이동
window.onload 이벤트를 통해서 페이지가 로드 되었을 때 URL에서 앵커 부분을 가져와 해당 앵커로 스크롤 합니다.
2. <a> 링크 클릭 시 이동
앵커 식별자를 통해 섹션으로 이동 합니다.
<!DOCTYPE html>
<html>
<head>
<title>앵커 예제</title>
</head>
<style>
html, body {
scroll-behavior: smooth; /* 스크롤 부드럽게 이동하는 CSS 속성 */
}
</style>
<script>
window.onload = function() {
// URL의 앵커를 가져옵니다.
var hash = window.location.hash;
// 앵커가 존재하는 경우 해당 앵커로 자동으로 이동합니다.
if (hash) {
var element = document.querySelector(hash);
if (element) {
element.scrollIntoView({ behavior: 'smooth' }); // 스크롤 부드럽게 이동
}
}
};
</script>
<body>
<ul>
<li><a href="#section1">섹션 1로 이동</a></li>
<li><a href="#section2">섹션 2로 이동</a></li>
<li><a href="#section3">섹션 3로 이동</a></li>
</ul>
<div id="section1" style="height:1000px; border:1px solid;">
<h2>섹션 1</h2>
<p>이곳은 섹션 1입니다.</p>
</div>
<div id="section2" style="height:1000px; border:1px solid;">
<h2 >섹션 2</h2>
<p>이곳은 섹션 2입니다.</p>
</div>
<div id="section3" style="height:1000px; border:1px solid;">
<h2>섹션 3</h2>
<p>이곳은 섹션 3입니다.</p>
</div>
</body>
</html>
반응형
'개발이야기 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] 주식 수익률 계산기 만들기 (0) | 2023.07.20 |
|---|---|
| [자바스크립트] 문자열 하이픈 넣기 (생년월일, 핸드폰/전화번호) (0) | 2023.07.18 |
| [자바스크립트] 문자열, 배열에서 특정 값 찾기 (includes) (0) | 2023.07.05 |
| [자바스크립트] 현재 페이지 URL Parameter 가져오기, 활용하기, 사용하기 (0) | 2023.06.08 |
| [자바스크립트] 다음 주소 검색 API 사용법, 예제 (daum postcode) (5) | 2023.05.31 |
댓글