1. jQuery cdn을 입력하여 jQuery 라이브러리 가져오기
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>head 사이에 cdn을 입력하여 라이브러리를 가져온다.
2. 섹션 이동 함수 코드 작성
<body>
<script>
function fnMove(seq) { // seq 값을 인자로 가지는 fnMove라는 이름의 함수
var offset = $("#section" + seq).offset(); // 이동하고자하는 태그의 좌표를 찍어주는 offset변수 생성
<!--html,body 영역에서 이동할 태그인 offset의 top 부분으로 scroll하는 animate -->
$('html, body').animate({
scrollTop: offset.top
}, 400); //0.4초 느리게
}
</script>
</body>body 태그 사이에 위의 script 코드를 작성해준다.
3. 예제
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">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
function fnMove(seq) {
var offset = $("#section" + seq).offset();
$('html, body').animate({
scrollTop: offset.top
}, 400);
}
</script>
<div class="link">
<a href="javascirpt:void(0)" onclick="fnMove(1)">섹션1</a>
<button onclick="fnMove(2)">섹션2</button>
<a href="javascirpt:void(0)" onclick="fnMove(3)">섹션3</a>
<button onclick="fnMove(4)">섹션4</button>
</div>
<div id="section1">section1</div>
<div id="section2">section2</div>
<div id="section3">section3</div>
<div id="section4">section4</div>
</body>
</html>
css
#section1 {
background-color: skyblue;
height:500px;
margin:20px;
}
#section2 {
background-color: yellow;
width: 100%;
height:500px;
margin:20px;
}
#section3 {
background-color: pink;
width: 100%;
height:500px;
margin:20px;
}
#section4 {
background-color: orange;
width: 100%;
height:500px;
margin:20px;
}
실행 영상
4. 배운점
.offset() 메서드는 이동하고자 하는 선택한 요소의 좌표를 가져온다.
.offset() 메서드는 원하는 좌표로 이동할 수도 있다.
ex) h1이 위로 50px 왼쪽으로 50px 이동하는 코드
$(h1).offset( { top: 50, left: 50 } );.position() 메서드 또한 .offset() 메서드와 기능이 동일하다. 하지만 부모요소를 기준으로 좌표를 리턴한다는 특징이 있어서 그 값이 절대적이다.
.offset() -> 브라우저의 왼쪽 위를 기준으로 위치를 반환한다. 브라우저에 따라 그 값이 변한다.
.position() -> 부모 요소를 기준으로 위치를 반환한다. 따라서 부모에 따라 그 값이 변한다.
.animate({scrollTop: offset.top}, 지연시간) -> offset의 top 값을 가지고 온다.
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
| [JavaScript] 형 변환, 문자형을 숫자형으로 변경하는 법(parseInt, parseFloat) (0) | 2021.05.18 |
|---|---|
| [JavaScript] 프로그래머스_가운데 글자 가져오기(substr() 사용하기) (0) | 2021.04.28 |
| [JavaScript] 프로그래머스 level1 모의고사 풀이 (0) | 2021.03.30 |
| 프로그래머스 Level1 두수의 합 구하기(JavaScript) (0) | 2021.03.24 |
| HTML, CSS 수평배치와 줄넘김하는 방법, flex와 flax-wrap 사용법 (0) | 2021.03.06 |