[소스] Div 이동 scroll-behavior:smooth div
2022.02.09
북마크 작성자 정보
작성일/수정일
2022-02-09 11:28:08 / 2022-02-09 11:28:08
a 태그를 클릭하여 해당 div(id)로 이동하는 방법 #2
scroll-behavior: auto | smooth | initial | inherit ;
전임자가 작업한 페이지에 있는 CSS한줄! 난 이걸 하기위해 jquery를 사용했는데.음~
a 엥커 태크 처럼 사용하는 것 같은데,,, 간단하게 animation 효과가 있어 유용하게 쓰겠다.
유의점
<a href="#">, <a href="#" id="btn01"> 이렇게 사용하면 상단(에니메이션)으로 이동함.
https://www.relation.co.kr/images_board/board_system_publishing/274/index.php
https://www.relation.co.kr/images_board/board_system_publishing/274/index2.php
//index1
//CSS
<style>
html,body { scroll-behavior:smooth; }
.menu_area { display:block; width:100%; height:30px;}
.menu_area ul li { display:inline-block; width:20%; height:100%; }
</style>
//html
<?PHP
for($i=1; $i<6; $i++ ){
$menu_ls .= "<li><a href="#step".$i."">menu".$i."</a></li>";
}
?>
<body>
<div class="menu_area">
<ul>
<?=$menu_ls ?>
</ul>
<div id="step1" style="display:block; width:100%; height:800px; background-color:black;"></div>
<div id="step2" style="display:block; width:100%; height:800px; background-color:red;"></div>
<div id="step3" style="display:block; width:100%; height:800px; background-color:blue;"></div>
</body>
//index2
<?PHP
for($i=1; $i<6; $i++ ){
$menu_ls .= "<li><a href="#step".$i."">menu".$i."</a></li>";
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" id="Meta-Viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1">
<title>RELATION.CO.KR_5_274_2</title>
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<style>
* { margin:0; padding:0; }
html,body { scroll-behavior:smooth; }
.menu_area { display:block; width:100%; height:30px;}
.menu_area ul li { display:inline-block; width:20%; height:100%; text-align:center; }
.menu_ares ul li a { width:100%; height:100%; text-align:center; }
</style>
<script>
$(document).ready(function(){
$("#btn_01").click(function(){
alert("링크C test!!")
});
$("#btn_02").click(function(e){
alert("링크D test!!");
e.preventDefault();
});
});
</script>
</head>
<body>
<div class="menu_area">
<ul>
<?=$menu_ls ?>
</ul>
</div>
<div id="step1" style="display:block; width:100%; height:800px; background-color:black;"></div>
<div id="step2" style="display:block; width:100%; height:800px; background-color:red;"></div>
<div id="step3" style="display:block; width:100%; height:800px; background-color:blue;"></div>
<div id="step4" style="display:block; width:100%; height:800px; background-color:aqua;">
<br><br><br>
<a href="#">링크A</a>
<br><br><br>
<button type="button">링크B(버튼타입)</button>
<br><br><br>
<a href="#" id="btn_01">링크c</a>
<br><br><br>
<a href="#" id="btn_02">링크D</a>
</div>
<div id="step5" style="display:block; width:100%; height:800px; background-color:aquamarine;"></div>
</body>
</html>
