动感JQuery返回顶部代码

最新推荐文章于 2024-07-25 11:52:08 发布

会飞的冰箱

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量252

点赞数 2

分类专栏： web前端文章标签： jquery html 源码分享免费源码

本文链接：https://blog.csdn.net/qq_19642249/article/details/53872176

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇文章会提供两个比较动感的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

会飞的冰箱

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动感JQuery返回顶部代码

这篇文章会提供两个比较动感的JQuery返回顶部的代码，效果比较好，并且我会把源码分享给大家，在我的空间有下载链接，完全免费。第一种：红色动感小火箭下面是源码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit
复制链接

扫一扫

专栏目录