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

最新推荐文章于 2025-08-13 21:05:35 发布

weixin_30639719

最新推荐文章于 2025-08-13 21:05:35 发布

阅读量51

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/firesnow/archive/2012/06/01/2531289.html

<!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>

转载于:https://www.cnblogs.com/firesnow/archive/2012/06/01/2531289.html