您的位置：首页 > Web前端 > JQuery

一个简洁有趣的回到顶部代码，基于jQuery框架

2012-06-01 20:58 363 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>有趣的动画回到顶部</title>
<script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
var $scrollTop = $(window).scrollTop();
if($(window).scrollTop() > $(window).height()/2){ //回到顶部的DIV显示的高度
var $wt = parseInt(($(window).height())*0.9); //出现回到顶部的DIV 据底部的高度，不能太大会出问题
var $getTop = parseInt($scrollTop)+$wt;
$("#content").fadeIn(500).animate({"top":$getTop + "px"},{duration:600,queue:false});
}else if($(window).scrollTop() <= $(window).height()/2){ //要是更改要和上面的一样
$("#content").fadeOut();
}
})
})
</script>
<style type="text/css">
<!--
#content{position:fixed;height:111px;width:31;padding:0 2px; position:absolute; right:100px; display:none;}
#content a{width:31px;height:11px;display:block;}
-->
</style>
</head>
<body>
<div id="content"><a href="#">回到顶部</a></div>
<p><a name="topTo" id="topTo"></a>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p><p>liehuo.net 网页特效</p>
</body>
</html>


　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航