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

动感JQuery返回顶部代码

2016-12-25 20:43 337 查看

这篇文章会提供两个比较动感的JQuery返回顶部的代码，效果比较好，并且我会把源码分享给大家，在我的空间有下载链接，完全免费。

第一种：红色动感小火箭

下面是源码：

<!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=gb2312" />
<title>jQuery火箭回到星空顶部效果</title>
<link href="css/sucaijiayuan.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body style="height:3000px">>
<!-- 代码 开始 -->
<div class="actGotop"><a href="javascript:;" title="返回顶部"></a></div>
<script type="text/javascript">
$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100){ //向下滚动像素大于这个值时，即出现小火箭~
$('.actGotop').fadeIn(300); //火箭淡入的时间，越小出现的越快~
}else{
$('.actGotop').fadeOut(300); //火箭淡出的时间，越小消失的越快~
}
});
$('.actGotop').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); //火箭动画停留时间，越小消失的越快~
});
</script>
<!-- 代码 结束 -->
</body>
</html>

第二种：个人比较喜欢

下面是源码：

<!doctype html>
<html >
<head>
<meta charset="utf-8" />
<title>木蚂蚁网站jQuery返回顶部</title>
<link rel="stylesheet" href="css/special.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
</head>
<body style="height:3000px;">
<div style="position:fixed; top:50px; left:0px; width:100%;font:normal 50px/2 'microsoft yahei';">
<center>
往下拉即可看到效果！
</center>
</div>

<div id="scrollTop" >
<div class="level-2"></div>
<div class="level-3"></div>
</div>
<script src="js/mumayi_top.js"></script>
</body>
</html>

第一种下载资源：http://download.csdn.net/detail/qq_19642249/9720822

第二种下载资源：http://download.csdn.net/detail/qq_19642249/9720820

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery html 源码分享免费源码

相关文章推荐

新的分享

章节导航