<html>
<head>
<title>TEST</title>
<script src="/jquery/jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$(".scroll").click(function(event){
//prevent the default action for the click event
event.preventDefault();
//get the full url - like mysitecom/index.htm#home
var full_url = this.href;
//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
var parts = full_url.split("#");
var trgt = parts[1];
//get the top offset of the target anchor
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
//goto that anchor by setting the body scroll top to anchor top
$('html, body').animate({scrollTop:target_top}, 500);
});
});
//-->
</script>
</head>
<body>
<div align="center">
<table border="1" cellspacing="1" width="500" id="table1">
<tr>
<td>
<div align="left" id="top">
<table border="0" cellpadding="0" cellspacing="0" width="100" id="table2">
<tr>
<td><a href="#home" class="scroll">HOME</a></td>
</tr>
<tr>
<td><a href="#about" class="scroll">ABOUT</a></td>
</tr>
<tr>
<td><a href="#contact" class="scroll">CONTACT</a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td height="500" valign="top"><span id="home">HOME AREA</span>
<a href="#top" class="scroll">Go Top</a></td>
</tr>
<tr>
<td valign="top" height="700"><span id="about">ABOUT AREA</span>
<a href="#top" class="scroll">Go Top</a></td>
</tr>
<tr>
<td valign="top" height="800"><span id="contact">CONTACT AREA </span>
<a href="#top" class="scroll">Go Top</a></td>
</tr>
</table>
</div>
</body>
</html>
'JAVASCRIPT' 카테고리의 다른 글
| 브라우저 크기에 따른 이미지 자동 크기조절 (0) | 2011.09.01 |
|---|---|
| 자바스크립트 타이머 (0) | 2011.07.13 |
| jQuery 스크롤 페이징 (0) | 2011.03.14 |
| jQuery로 ajax실행 중 로딩이미지 (0) | 2010.12.22 |
| jQuery.ajax()를 이용한 페이지 실행 (0) | 2010.12.21 |
