<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
</script>
</head>
<body>
<ul>
<li><a href="javascript:void(0)" onClick="goToByScroll('1')">Go to anchor 1</a></li>
<li><a href="javascript:void(0)" onClick="goToByScroll('2')">Go to anchor 2</a></li>
<li><a href="javascript:void(0)" onClick="goToByScroll('3')">Go to anchor 3</a></li>
<li><a href="javascript:void(0)" onClick="goToByScroll('4')">Go to anchor 4</a></li>
</ul>
<div style="width:600px">
<div id="1">
<h1>1</h1>
내용1
</div>
<div id="2">
<h1>2</h1>
내용2
</div>
<div id="3">
<h1>3</h1>
내용3
</div>
<div id="4">
<h1>4</h1>
내용4
</div>
</div>
</body>
</html>
출처 : http://djpate.com/portfolio/scrollTop/
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
</script>
</head>
<body>
<ul>
<li><a href="javascript:void(0)" onClick="goToByScroll('1')">Go to anchor 1</a></li>
<li><a href="javascript:void(0)" onClick="goToByScroll('2')">Go to anchor 2</a></li>
<li><a href="javascript:void(0)" onClick="goToByScroll('3')">Go to anchor 3</a></li>
<li><a href="javascript:void(0)" onClick="goToByScroll('4')">Go to anchor 4</a></li>
</ul>
<div style="width:600px">
<div id="1">
<h1>1</h1>
내용1
</div>
<div id="2">
<h1>2</h1>
내용2
</div>
<div id="3">
<h1>3</h1>
내용3
</div>
<div id="4">
<h1>4</h1>
내용4
</div>
</div>
</body>
</html>
출처 : http://djpate.com/portfolio/scrollTop/
'web standard > jquery' 카테고리의 다른 글
| 가로&세로 슬라이드 (0) | 2011.04.04 |
|---|---|
| jquery 예제모음 (0) | 2011.03.22 |
| 베너 슬라이드&버튼이동 (0) | 2011.02.22 |
| jquery를 이용한 온오프 (0) | 2010.11.23 |
| jquery 이미지 슬라이드 (0) | 2010.10.08 |
