티스토리 뷰

HTML&CSS&Javscript&Jquery

190826 메뉴 클릭 시 애니메이트로 메뉴 이동시키기

猫猫 2019. 8. 26. 21:50
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>
<script>
	$(function(){ //a태그로 하면 번쩍! 이동하고 animate 쓰면 부드럽게 스크롤 된다. 
		$("#td1").click(function(){
			var pt = $("#p1").offset().top;
			$("html").animate({scrollTop:pt}, 300); //animate(객체, 시간)
		});		
		
		$("#td2").click(function(){
			var pt = $("#p2").offset().top;
			$("html").animate({scrollTop:pt}, 300); //animate(객체, 시간)
		});
		
		$("#td3").click(function(){
			var pt = $("#p3").offset().top;
			$("html").animate({scrollTop:pt}, 300); //animate(객체, 시간) 
		});
		
	});

</script>
<style>
	table{
		positon: fixed;
		width:100%;
		top:0px;
		background-color: orange;
	}

</style>
</head>
<body>
	<table> <!-- 항상화면에 떠있어야 한다. -->
		<tr>
			<td id="td1" align="center"> menu 1</td>
			<td id="td2" align="center"> menu 2</td>
			<td id="td3" align="center"> menu 3</td>			
		</tr>
	</table>
	<div id="p1"><h1>1 page</h1></div>
	111111111111111111111111111111111111<br>1111111111111111111111111111111111111111111111111<br>
	111111111111111111111111111111111111<br>1111111111111111111111111111111111111111111111111<br>
	111111111111111111111111111111111111<br>1111111111111111111111111111111111111111111111111<br>
	111111111111111111111111111111111111<br>1111111111111111111111111111111111111111111111111<br>
	111111111111111111111111111111111111<br>1111111111111111111111111111111111111111111111111<br>
	111111111111111111111111111111111111<br>1111111111111111111111111111111111111111111111111<br>
	111111111111111111111111111111111111<br>1111111111111111111111111111111111111111111111111<br>
	111111111111111111111111111111111111<br>1111111111111111111111111111111111111111111111111<br>
	111111111111111111111111111111111111<br>1111111111111111111111111111111111111111111111111<br>
	111111111111111111111111111111111111<br>1111111111111111111111111111111111111111111111111<br>
	111111111111111111111111111111111111<br>1111111111111111111111111111111111111111111111111<br>
	111111111111111111111111111111111111<br>1111111111111111111111111111111111111111111111111<br>
	111111111111111111111111111111111111<br>1111111111111111111111111111111111111111111111111<br>
	111111111111111111111111111111111111<br>1111111111111111111111111111111111111111111111111<br>
	111111111111111111111111111111111111<br>1111111111111111111111111111111111111111111111111<br>
	111111111111111111111111111111111111<br>1111111111111111111111111111111111111111111111111<br>
	111111111111111111111111111111111111<br>1111111111111111111111111111111111111111111111111<br>
	111111111111111111111111111111111111<br>1111111111111111111111111111111111111111111111111<br>
	<div id="p2"><h1>2 page</h1></div>
	2222222222222222222222222222222222222<br>222222222222222222222222222222222222222222222222<br>
	2222222222222222222222222222222222222<br>222222222222222222222222222222222222222222222222<br>
	2222222222222222222222222222222222222<br>222222222222222222222222222222222222222222222222<br>
	2222222222222222222222222222222222222<br>222222222222222222222222222222222222222222222222<br>
	2222222222222222222222222222222222222<br>222222222222222222222222222222222222222222222222<br>
	2222222222222222222222222222222222222<br>222222222222222222222222222222222222222222222222<br>
	2222222222222222222222222222222222222<br>222222222222222222222222222222222222222222222222<br>
	2222222222222222222222222222222222222<br>222222222222222222222222222222222222222222222222<br>
	2222222222222222222222222222222222222<br>222222222222222222222222222222222222222222222222<br>
	2222222222222222222222222222222222222<br>222222222222222222222222222222222222222222222222<br>
	2222222222222222222222222222222222222<br>222222222222222222222222222222222222222222222222<br>
	2222222222222222222222222222222222222<br>222222222222222222222222222222222222222222222222<br>
	2222222222222222222222222222222222222<br>222222222222222222222222222222222222222222222222<br>
	2222222222222222222222222222222222222<br>222222222222222222222222222222222222222222222222<br>
	2222222222222222222222222222222222222<br>222222222222222222222222222222222222222222222222<br>
	2222222222222222222222222222222222222<br>222222222222222222222222222222222222222222222222<br>
	2222222222222222222222222222222222222<br>222222222222222222222222222222222222222222222222<br>
	2222222222222222222222222222222222222<br>222222222222222222222222222222222222222222222222<br>
	<div id="p3"><h1>3 page</h1></div>
	3333333333333333333333333333333333333333333333<br>333333333333333333333333333333333333333<br>
	3333333333333333333333333333333333333333333333<br>333333333333333333333333333333333333333<br>
	3333333333333333333333333333333333333333333333<br>333333333333333333333333333333333333333<br>
	3333333333333333333333333333333333333333333333<br>333333333333333333333333333333333333333<br>
	3333333333333333333333333333333333333333333333<br>333333333333333333333333333333333333333<br>
	3333333333333333333333333333333333333333333333<br>333333333333333333333333333333333333333<br>
	3333333333333333333333333333333333333333333333<br>333333333333333333333333333333333333333<br>
	3333333333333333333333333333333333333333333333<br>333333333333333333333333333333333333333<br>
	3333333333333333333333333333333333333333333333<br>333333333333333333333333333333333333333<br>
	3333333333333333333333333333333333333333333333<br>333333333333333333333333333333333333333<br>
	3333333333333333333333333333333333333333333333<br>333333333333333333333333333333333333333<br>
	3333333333333333333333333333333333333333333333<br>333333333333333333333333333333333333333<br>
	3333333333333333333333333333333333333333333333<br>333333333333333333333333333333333333333<br>
	3333333333333333333333333333333333333333333333<br>333333333333333333333333333333333333333<br>
	3333333333333333333333333333333333333333333333<br>333333333333333333333333333333333333333<br>
	3333333333333333333333333333333333333333333333<br>333333333333333333333333333333333333333<br>
	3333333333333333333333333333333333333333333333<br>333333333333333333333333333333333333333<br>
	3333333333333333333333333333333333333333333333<br>333333333333333333333333333333333333333<br>
	3333333333333333333333333333333333333333333333<br>333333333333333333333333333333333333333<br>
	3333333333333333333333333333333333333333333333<br>333333333333333333333333333333333333333<br>
	

</body>
</html>
반응형
저작자표시 비영리 변경금지

'HTML&CSS&Javscript&Jquery' 카테고리의 다른 글

실제 사용하는 정규식 패턴  (0) 2020.06.26
class 로 셀렉트 박스 들 초기화 시키기  (0) 2020.06.26
190826 셀렉트, 스크롤 바닥 됐을때 다음 내용 이어붙이기  (0) 2019.08.26
190826 키보드 이벤트  (0) 2019.08.26
190826 마우스 이벤트  (0) 2019.08.26