<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//首先将#goto_top隐藏
$("#goto_top").hide();
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#goto_top").fadeIn(1500);
}
else
{
$("#goto_top").fadeOut(150);
}
});
//当点击跳转链接后,回到页面顶部位置,滚动条跳到0的位置,页面移动速度是800
$("#goto_top").click(function(){
$('body,html').animate({scrollTop:0},800);
false;
});
});
});
</script>
<style type="text/css">
.goto_top{
z-index:99;
margin-top:-80px;
}
</style>
</head>
<body id="top">
<div id="di1" class="di" style="background-color:#09C; height:800px;" ></div>
<div id="goto_top" class="goto_top" align="center" >
<img src="Top.gif" class="pic"/>
</div>
<!-- 利用传统的锚 定位-->
<div id="di2" class="di" style="background-color:#099; height:800px;" ></div>
<div align="right">
<a href="#top"><img src="Top.gif"/></a>
</div>
</body>
</html>
回顶部
最新推荐文章于 2024-04-30 21:38:56 发布