[소스] a href="#area1" 해당 위치로 자동 스크롤
2022.11.23
북마크 작성자 정보
작성일/수정일
2022-11-23 13:55:15 / 2022-11-23 13:55:15
해당 위치로 자동 스크롤
http://relation.co.kr/images_board/board_system_publishing/42/index.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RELATION.CO.KR_5_42</title>
<style>
* { margin:0; padding:0; }
header { position:fixed; left:0; top:0; width:100%; height:50px;}
section { width:100%; }
footer { width:100%; height:100px; }
.wrap { display:block; width:100%; }
.menu { width:100%; height:50px; background:#FFF; }
.menu ul li { display:inline-block; width:calc(100% / 6); height:50px; text-align:center; }
.menu ul li a { width:100%; height:50px; line-height:50px; }
.content_wrap { width:100%; margin-top:50px;}
.content_wrap .area1 { width:100%; height:1000px; background-color:#00F;}
.content_wrap .area2 { width:100%; height:1000px; background-color:#09F;}
.content_wrap .area3 { width:100%; height:1000px; background-color:#0FF;}
.content_wrap .area4 { width:100%; height:1000px; background-color:#C00;}
.content_wrap .area5 { width:100%; height:1000px; background-color:#9F0;}
.content_wrap .area6 { width:100%; height:1000px; background-color:#FCF;}
.footer_area { width:100%; height:100px; line-height:100px; color:#fff; text-align:center; background:#242424; }
</style>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$('document').ready(function(){
$('.menu > ul > li > a').click(function(){
let target_split = $(this).attr("href");
let target_val = $(target_split).offset().top;
console.log("checkin2", target_split, target_val);
$('html,body').animate({scrollTop: target_val - 50}, 500);
return false;
});
});
</script>
</head>
<body>
<div class="wrap">
<header>
<div class="menu">
<ul>
<li><a href="#area1">메뉴1</a></li><li><a href="#area2">메뉴2</a></li><li><a href="#area3">메뉴3</a></li><li><a href="#area4">메뉴4</a></li><li><a href="#area5">메뉴5</a></li><li><a href="#area6">메뉴6</a></li>
</ul>
</div>
</header>
<section>
<div class="content_wrap">
<div class="area1" id="area1"></div>
<div class="area2" id="area2"></div>
<div class="area3" id="area3"></div>
<div class="area4" id="area4"></div>
<div class="area5" id="area5"></div>
<div class="area6" id="area6"></div>
</div>
</section>
<footer>
<div class="footer_area">
FOOTER
</div>
</footer>
</div>
</body>
</html>
