jQuery를 사용하여 현재 파일에서 다른 파일로 이동한 후 해당 파일 내 특정 위치로 스크롤하려면 일반적인 방법으로는 앵커 태그를 사용하여 해결할 수 있습니다. 기본적으로 HTML의 id를 사용한 앵커 링크를 클릭하면 다른 페이지로 이동하고 해당 페이지에서 특정 위치로 바로 이동할 수 있습니다. 하지만 부드러운 스크롤 애니메이션을 유지하기 위해서는 새 페이지에서도 jQuery를 사용하여 해당 위치로 스크롤하도록 설정해야 합니다.
1. 기본 HTML 앵커 링크 방식
<!-- 현재 파일 (page1.html) -->
<a href="page2.html#section2">Go to Section 2 on Page 2</a>
2. 목표 파일에서 특정 위치로 부드럽게 이동 (예: page2.html)
이제, page2.html에 특정 위치로 부드럽게 이동하는 jQuery 코드를 추가할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page 2</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
section {
height: 600px; /* 각 섹션에 충분한 높이를 부여 */
padding: 20px;
}
#section1 { background-color: lightblue; }
#section2 { background-color: lightgreen; }
#section3 { background-color: lightcoral; }
</style>
</head>
<body>
<section id="section1">
<h2>Section 1</h2>
<p>Content of section 1</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>Content of section 2</p>
</section>
<section id="section3">
<h2>Section 3</h2>
<p>Content of section 3</p>
</section>
<script>
$(document).ready(function() {
// URL에서 앵커(#)가 있는지 확인하고 해당 위치로 부드럽게 스크롤
if (window.location.hash) {
var target = window.location.hash;
$('html, body').animate({
scrollTop: $(target).offset().top
}, 800); // 800ms 동안 부드럽게 스크롤
}
});
</script>
</body>
</html>
설명
- page1.html
- href="page2.html#section2"처럼 다른 파일로 이동한 후 그 파일의 특정 섹션(section2)으로 바로 이동하도록 링크를 만듭니다.
- page2.html
- window.location.hash를 사용하여 URL에 포함된 앵커(#section2) 값을 확인합니다.
- 만약 앵커가 존재한다면 해당 위치로 animate()를 사용하여 부드럽게 스크롤합니다.
요약
- 사용자가 page1.html에서 링크를 클릭하면 page2.html로 이동하며, 이동한 후 해당 페이지의 #section2로 부드럽게 스크롤됩니다.
- 이를 통해 여러 파일 간에 부드러운 스크롤 경험을 제공합니다.
#jQuery #html #부드럽게스크롤 #hash #animate() #특정위치로이동 #프로그래밍 #조금씩배워가는프로그래밍
반응형
'프로그램' 카테고리의 다른 글
| jQuery를 사용하여 이미지를 반응형으로 만드는 방법 (0) | 2024.11.13 |
|---|---|
| jquery 숫자만 입력 체크, 천 단위 콤마 자동 추가 (0) | 2024.10.30 |
| jQuery로 iframe에서 부모 창 함수 호출 (0) | 2024.09.28 |
| jQuery를 사용하여 몇 번째 요소인지 알아내기 (0) | 2024.09.10 |
| jQuery를 이용한 부모 창 특정 아이템 호출 (0) | 2024.09.08 |
댓글