쇼핑몰 등 여러 사이트의 우측 하단을 보면 top 혹은 위쪽 방향 화살표를 볼 수 있다. 이를 누르면 페이지 맨 위로 이동된다. 이렇게 스크롤의 위치를 바꾸도록 동작시킬 수 있다.
※ 참고
<a>에서 href로 현재 페이지 내에서 이동, 다른 html 문서, javascript 파일, 특정 사이트로 이동 등 다양하게 가능하다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>15_스크롤이동.html</title>
<script src="jquery-3.6.1.min.js"></script>
<link rel="stylesheet" href="../css/reset.css"/>
<style>
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
html {overflow-y: scroll;}
body {font:14px 'Nanum Gothic',dotum, sans-serif; margin:0;}
.hide {width:0; height:0; margin:0; border:0; padding:0; font-size:0; line-height:0; overflow: hidden; visibility: hidden;}
#footer {border-top:1px solid #00BCD4; width:1000px; height:300px; text-align: center; color:#00BCD4; line-height: 100px;}
#topBtn a {position:fixed; bottom:10px; margin-left:1010px; display: block; width:50px; height:50px; border-radius: 25px; background:#00BCD4; color:#fff; font-size:20px; font-weight: bold; box-shadow:0 0 4px #333; text-align:center; line-height:50px; opacity: .5; text-decoration: none;}
#topBtn a:hover {opacity: 1;}
#wrap {width:1000px; margin: auto; border:1px solid rebeccapurple;}
#header {width:1000px; height:122px; position: fixed; top:0; background:#fff;}
#header>h1 {height:70px; text-align: center; font-size:36px; color:#00BCD4; line-height:70px; font-weight:bold;}
#nav {height:50px; border:1px solid #00BCD4; border-left:none; border-right:none; text-align: center;}
#nav li {display: inline-block; margin: 3px 0 3px;}
#nav li a {display:block; padding:0 10px 0 10px; height:50px; line-height:50px; color:#00BCD4; font-size:17px; font-weight:bold; text-decoration: none;}
#nav li a:hover {background:#80DEEA; color:#fff; text-decoration: underline;}
#nav li.now a {background:#00BCD4; color:#fff;}
#content {width:1000px; min-height:400px; padding-top:121px; color:#fff;}
#content h2 {font-size:200px; font-weight:bold; text-align: center;}
#box1 {width:1000px; height:600px; background:#E91E63;}
#box1>h2 {line-height:600px;}
#box2 {width:1000px; height:1000px; background:#3F51B5;}
#box2>h2 {line-height:1000px;}
#box3 {width:1000px; height:400px; background:#03A9F4;}
#box3>h2 {line-height:400px;}
#box4 {width:1000px; height:800px; background:#8BC34A;}
#box4>h2 {line-height:800px;}
#box5 {width:1000px; height:1200px; background:#FFC107;}
#box5>h2 {line-height:1200px;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>로고</h1>
<div id="nav">
<h2 class="hide">메인메뉴</h2>
<ul>
<li class="now"><a href="">박스1보기</a></li>
<li><a href="">박스2보기</a></li>
<li><a href="">박스3보기</a></li>
<li><a href="">박스4보기</a></li>
</ul>
</div><!--#nav end-->
</div><!--#header end-->
<div id="content">
<div id="box1"><h2>박스1</h2></div>
<div id="box2"><h2>박스2</h2></div>
<div id="box3"><h2>박스3</h2></div>
<div id="box4"><h2>박스4</h2></div>
<div id="box5"><h2>박스5</h2></div>
</div><!--#content end-->
<div id="footer">
© 2022 ITWILL
</div><!--#footer end-->
<div id="topBtn">
<a href="#wrap">TOP</a>
</div><!--#topBtn end-->
</div><!--#wrap end-->
</body>
</html>이 형식을 바탕으로 스크롤 기능을 넣어보겠다.
<script>
$("#nav li").click(function(e){ //매개변수 e는 클릭 이벤트를 받는 객체
// alert("test");
// alert(e);
//브라우저가 가진 기본 기능 막기
//내부 링크 안걸림
//<a>의 기본 동작을 방지한다. 클릭해도 리로드가 일어나지 않음
e.preventDefault();
//사용자가 클릭한 li 요소의 index 얻기
let idx = $(this).index();
//alert(idx);
//각 id=box1 ~ 5의 윗쪽 여백
// alert($("#box1").offset().top); //122
// alert($("#box2").offset().top); //722
// alert($("#box3").offset().top);
// alert($("#box4").offset().top);
// alert($("#box5").offset().top);
let bTop = $("#box" + (idx+1)).offset().top
//스크롤 애니메이션 처리
//$("body") 브라우저마다 처리하는 객체가 다름
//123-> id=box1의 윗쪽 여백
//300-> 애니메이션 실행 속도
$("body, html").animate({scrollTop:bTop-122}, 300);
});
</script>
박스 1을 누르면 스크롤이 맨 위로 올라와 박스 1이 보이게, 또 박스 2를 누르면 박스 2가 보이도록 스크롤을 이동시켜야 한다. 우리는 offset 함수로 각 박스의 위치 값을 구했다. 박스 1이 122에서 시작하므로 ?의 길이는 122이다. 따라서 박스 1의 위치 값에서 122를 빼면 스크롤이 맨 위로 올라온다.
같은 방식으로 각 박스의 위치값에서 122를 빼면 해당 박스의 위치로 스크롤이 이동된다.
'웹개발 교육 > jQuery' 카테고리의 다른 글
| [44일] jQuery (17) - Ajax (0) | 2022.09.28 |
|---|---|
| [44일] jQuery (16) - Ajax (0) | 2022.09.28 |
| [44일] jQuery (14) - offset과 position (0) | 2022.09.28 |
| [43일] jQuery (13) - 아날로그 시계 (0) | 2022.09.27 |
| [43일] jQuery (11) - moment (0) | 2022.09.27 |
