在网上找来段使用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=utf-8" />

<title>jQuery火箭图标返回顶部代码 - 站长素材</title>

<!--script src="js/jquery.js?v=1.83.min" type="text/javascript"></script-->

<script src="http://common.cnblogs.com/script/jquery.js?v=1.7.min" type="text/javascript"></script>

<style type="text/css">

body{height:3000px;}

/*回到顶部*/

#rocket-to-top div {

    left: 0;

    margin: 0;

    overflow: hidden;

    padding: 0;

    position: absolute;

    top: 0;

    width: 149px;

}

#rocket-to-top .level-2 {

    background: url("http://images.cnblogs.com/cnblogs_com/mq0036/508398/o_rocket_button_up.png") no-repeat scroll -149px 0 transparent;

    display: none;

    height: 250px;

    opacity: 0;

    z-index: 1;

}

#rocket-to-top .level-3 {

    background: none repeat scroll 0 0 transparent;

    cursor: pointer;

    display: block;

    height: 150px;

    z-index: 2;

}

#rocket-to-top {

    background: url("http://images.cnblogs.com/cnblogs_com/mq0036/508398/o_rocket_button_up.png") no-repeat scroll 0 0 transparent;

    cursor: default;

    display: block;

    height: 250px;

    margin: -125px 0 0;

    overflow: hidden;

    padding: 0;

    position: fixed;

    right: 0;

    top: 80%;

    width: 149px;

    z-index: 11;

}

</style>

<script type="text/javascript">

// jQuery火箭图标返回顶部代码

$(function() {

    var e = $("#rocket-to-top"),

    t = $(document).scrollTop(),

    n,

    r,

    i = !0;

    $(window).scroll(function() {

        var t = $(document).scrollTop();

        t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({

            marginTop: "-1000px"

        },

        "normal",

        function() {

            e.css({

                "margin-top": "-125px",

                display: "none"

            }),

            i = !0

        })) : e.fadeIn("slow")

    }),

    e.hover(function() {

        $(".level-2").stop(!0).animate({

            opacity: 1

        })

    },

    function() {

        $(".level-2").stop(!0).animate({

            opacity: 0

        })

    }),

    $(".level-3").click(function() {

        function t() {

            var t = e.css("background-position");

            if (e.css("display") == "none" || i == 0) {

                clearInterval(n),

                e.css("background-position", "0px 0px");

                return

            }

            switch (t){

            case "0px 0px":

                e.css("background-position", "-298px 0px");

                break;

            case "-298px 0px":

                e.css("background-position", "-447px 0px");

                break;

            case "-447px 0px":

                e.css("background-position", "-596px 0px");

                break;

            case "-596px 0px":

                e.css("background-position", "-745px 0px");

                break;

            case "-745px 0px":

                e.css("background-position", "-298px 0px");

            }

        }

        if (!i) return;

        n = setInterval(t, 50),

        $("html,body").animate({scrollTop: 0},"slow");

    });

});

</script>

</head>

<body>

<center>

<h2>jQuery火箭图标返回顶部代码</h2>

<h3>滚动滑动条后，查看右下角查看效果。很炫哦！！</h3>

</center>

<!-- 火箭 -->

<div style="display: none;" id="rocket-to-top">

    <div style="opacity:0;display: block;" class="level-2"></div>

    <div class="level-3"></div>

</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>

<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>

</div>

</body>

</html>

我在本地测试使用的jQuery是1.8的，同样也可以使用1.7版本的

参考出处：http://sc.chinaz.com/jiaoben/140429325430.htm

jQuery火箭图标返回顶部代码的更多相关文章

  1. qq空间返回顶部代码

    点击这里体验效果 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  2. 使用jQuery简单实现返回顶部的一个小案例

    1.简单写一个页面 首先我们应该创建两个盒子,container盒子主要模拟页面滚动到的位置,back盒子主要功能是实现返回顶部的功能 2.简单的对这两个盒子写一些样式 我们应该先将返回顶部盒子隐藏( ...

  3. jQuery返回顶部代码

    页面较长时,使用返回顶部按钮比较方便,在电商中必备操作.下面自己制作一个js文件,totop.js,把它直接引用到需要的网页中即可. $(function () { $("body" ...

  4. JavaScript/Jquery返回顶部代码

    <!DOCTYPE html> <html> <head> <title>返回顶部</title> <meta charset=&qu ...

  5. 编写jQuery插件--实现返回顶部插件

    国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...

  6. css 简单 返回顶部 代码及注释说明

    1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...

  7. jQuery中页面返回顶部的方法总结

    当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点. 方法一 锚点定位 ? 1 <a href="#" class ...

  8. [html][转]常用返回顶部代码

    转至:http://jingyan.baidu.com/article/7082dc1ca6b928e40a89bd1a.html 一.使用HTML的锚标记最简单了 但是唯一的缺点就是样式不怎么样,会 ...

  9. jQ 移动端返回顶部代码整理

    //返回顶部 $('#btn-scroll').on('touchend',function(){ var T = $(window).scrollTop(); var t = setInterval ...

随机推荐

  1. Sharding-Jdbc实现分表分库

    Sharding-Jdbc分表分库LogicTable数据分片的逻辑表,对于水平拆分的数据库(表),同一类表的总称.订单信息表拆分为2张表,分别是t_order_0.t_order_1,他们的逻辑表名 ...

  2. code for 1 - 分治

    2017-08-02 17:23:14 writer:pprp 题意:将n分解为n/2, n%2, n/2三部分,再将n/2分解..得到一个序列只有0和1,给出[l, r]问l到r有几个1 题解:分治 ...

  3. POJ - 2785 - 4 Values whose Sum is 0 - 二分折半查找

    2017-08-01 21:29:14 writer:pprp 参考:http://blog.csdn.net/piaocoder/article/details/45584763 算法分析:直接暴力 ...

  4. node基础(一)——http模块

    一.http模块 http.createSverver() http是node自带的模块,通过require("http")的方法载入: 使用http创建服务器: http.cre ...

  5. spring3: helloword

    借助:eclipse,mavn,spring-tool-sitedchapter2.helloworld 项目搭建好了,让我们来开发接口,此处我们只需实现打印“Hello World!”,所以我们定义 ...

  6. C# 运行时替换方法（需要unsafe编译）

    /* https://stackoverflow.com/questions/7299097/dynamically-replace-the-contents-of-a-c-sharp-method ...

  7. Ceph Monitor的数据管理

    转自:https://www.ustack.com/blog/ceph-monitor-2/ Monitor管理了Ceph的状态信息,维护着Ceph中各个成员的关系,这些信息都是存放在leveldb中 ...

  8. 封装hibernate中session（静态单例模式）

    因为每次用增删改查时都需要用到session,直接做一个类,需要的时候只需要调用即可 import org.hibernate.Session; import org.hibernate.Sessio ...

  9. 条款22：将成员变量声明为private

    protected成员变量的封装性并非高于public变量. 如果有个public的成员变量,一旦其需要改变,那么所有使用它的代码都需要改变. 如果有个protected的成员变量,一点其需要改变,那 ...

  10. dateTimePicker编辑状态下，取值不正确的问题

    当对dateTimePicker进行编辑,回车,调用函数处理dateTimePicker的value值时,其取值结果是你编辑之前的值,而不是你编辑后的值,虽然dateTimePicker.text的值 ...