반응형
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
#diva {
height:2500px;
}
#scrollBtn1,#scrollBtn2 {
cursor:pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#scrollBtn1").click(function(){
//divb의 top의 위치 값으로 이동
var pos=$("#divb").position().top;
$("html, body").animate({scrollTop:pos},'slow');
});
$("#scrollBtn2").click(function(){
$("html, body").animate({scrollTop:0},'slow');
});
});
</script>
</head>
<body>
<div id="diva">
맨위
<p id="scrollBtn1">[맨아래로 이동]</p>
</div>
<div id="divb">
맨 아래
<p id="scrollBtn2">[맨위로 이동]</p>
</div>
</body>
</html>
dd
해당 페이지 맨위와 divb(맨 아래)로 애니메이션 이동
확인:http://azit4u.phps.kr/jquery/scrollTop.html
반응형
'자바스크립트&jQuery' 카테고리의 다른 글
| 로컬스토리지 사용방법: 저장, 수정, 삭제 (0) | 2024.11.12 |
|---|---|
| 자바스크립트로 각자리 숫자 합계 구하기 (0) | 2014.01.24 |
| jQuery preventDefault(); (0) | 2011.10.17 |
| jQuery hover(), toggleClass(), toggle() (0) | 2011.10.14 |
| jQuery css (0) | 2011.10.14 |
