프리랜서 웹개발자 RELATION

RELATION 로고

홈페이지 소스

[소스] scroll-behavior:smooth div

2022.02.09
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>

이 포스트 공유하기

글수정  글삭제 전체목록