[제이쿼리] 특정 요소로 화면 이동하기
jQuery를 사용하여 특정 요소로 화면을 이동하는 방법은 animate 함수와 scrollTop 또는 scrollIntoView 메서드를 활용하는 것입니다. 아래에 두 가지 방법을 제시하겠습니다.
위의 두 가지 방법 중 하나를 사용하여 버튼 클릭 시 특정 요소로 부드럽게 스크롤할 수 있습니다. 첫 번째 방법은 animate 함수와 scrollTop 속성을 사용하여 애니메이션 효과를 주는 방법이고, 두 번째 방법은 HTML5의 scrollIntoView 메서드를 사용하여 브라우저 기본 스크롤 애니메이션을 사용하는 방법입니다. 필요에 따라 적절한 방법을 선택해서 사용하면 됩니다.
방법 1: animate와 scrollTop을 사용한 방법
새 html 파일을 생성한 후 아래 코드를 입력해 어떻게 특정 요소로 화면이 이동하는지 우선 확인합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 특정 요소로 화면 이동</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
height: 2000px;
padding: 0;
margin: 0;
}
#target {
margin-top: 1500px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<button id="scrollBtn">Scroll to Target</button>
<div id="target">Scroll to me!</div>
<script>
$(document).ready(function() {
$("#scrollBtn").click(function() {
$('html, body').animate({
scrollTop: $("#target").offset().top
}, 1000); // 1000ms = 1초 동안 애니메이션
});
});
</script>
</body>
</html>제이쿼리 함수를 중심으로 간략한 설명을 추가하겠습니다.
$(document).ready(function() { ... });이 함수는 문서가 완전히 로드되고 DOM이 준비되었을 때 실행됩니다. jQuery를 사용할 때 자주 사용하는 초기화 함수입니다. DOM 요소가 모두 로드된 후에 jQuery 코드를 실행할 수 있도록 보장합니다.
$("#scrollBtn").click(function() { ... });#scrollBtn 아이디를 가진 버튼이 클릭되었을 때 실행될 함수를 $("#scrollBtn").click(function() { ... });안에 정의합니다. 제이쿼리는 이렇게 버튼 클릭 이벤트를 처리합니다.
$('html, body').animate({
scrollTop: $("#target").offset().top
}, 1000); // 1000ms = 1초 동안 애니메이션$('html, body').animate({ scrollTop: $("#target").offset().top }, 1000);는 이번 글의 핵심입니다. 이 줄은 HTML과 BODY 요소를 애니메이션 효과로 스크롤합니다.
먼저, $('html, body')로 HTML과 BODY 요소를 선택합니다. 두 요소를 함께 선택하는 이유는 브라우저 호환성 문제를 피하기 위해서입니다.
그 다음 .animate({ scrollTop: ... }, 1000)을 이용해 애니메이션을 사용하여 스크롤합니다. 첫 번째 인수는 애니메이션할 CSS 속성과 값의 객체이며, 두 번째 인수는 애니메이션의 지속 시간을 밀리초 단위로 지정합니다.
마지막으로 scrollTop: $("#target").offset().top으로 페이지의 상단에서 #target 요소의 상단까지의 거리로 스크롤합니다. offset().top은 #target 요소의 페이지 상단에서의 오프셋(거리)을 반환합니다. 이렇게 함수를 정희하면 버튼을 클릭했을 때 부드럽게 특정 위치로 스크롤합니다.
방법 2: scrollIntoView를 사용한 방법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 특정 요소로 화면 이동</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
height: 2000px;
padding: 0;
margin: 0;
}
#target {
margin-top: 1500px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<button id="scrollBtn">Scroll to Target</button>
<div id="target">Scroll to me!</div>
<script>
$(document).ready(function() {
$("#scrollBtn").click(function() {
$("#target")[0].scrollIntoView({ behavior: 'smooth' });
});
});
</script>
</body>
</html>
이 코드는 우선 페이지가 로드되면 jQuery 코드를 준비합니다. 사용자가 Scroll to Target 버튼을 클릭하면 #target 요소로 부드럽게 스크롤합니다. scrollIntoView 메서드를 사용하여 스크롤 동작을 부드럽게 설정합니다.
첫 번째 방법과 마찬가지로 $(document).ready(function() { ... });을 이용해 HTML 문서가 완전히 로드되고 DOM이 준비되었을 때 jQuery 코드를 실행하도록 설정합니다. 이 제이쿼리 코드는 페이지가 로드되기 전에 jQuery 코드가 실행되지 않도록 보장합니다.
두 번째 방법의 핵심인 $("#target")[0].scrollIntoView({ behavior: 'smooth' });는 #target이라는 ID를 가진 요소로 부드럽게 스크롤합니다. 하나씩 살펴보면, 우선 $("#target")로 #target 요소를 선택합니다. 그 다음에 있는 [0]는 jQuery 객체에서 DOM 요소를 직접 참조합니다. 이는 scrollIntoView 메서드를 사용하기 위해 필요합니다. 마지막 부분인 scrollIntoView({ behavior: 'smooth' })는 선택한 요소가 화면에 보이도록 부드럽게 스크롤합니다. behavior: 'smooth' 옵션을 사용하여 스크롤이 부드럽게 이동하도록 설정합니다. 이렇게 제이쿼리를 입력하면 버튼을 클릭했을 때 페이지가 특정 요소로 부드럽게 스크롤되도록 합니다.
이 코드를 통해 버튼 클릭 시 지정한 위치로 자연스럽게 이동하는 기능을 구현할 수 있습니다.