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>반응형