在网上找来段使用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. [BZOJ1721][Usaco2006 Mar]Ski Lift 缆车支柱

    Description Farmer Ron in Colorado is building a ski resort for his cows (though budget constraints ...

  2. JavaScript常用知识点整理——思维导图

    如图 思维导图图片链接 http://www.edrawsoft.cn/viewer/public/s/b8327462051289 有道云笔记图片链接 http://note.youdao.com/ ...

  3. Java编程时部分快捷键

    alt + / 内容助理 配置:Window->properties->keys->查看alt + /的配置,然后解除当前的配置->搜索content assist->解 ...

  4. Java条件语句之多重 if

    多重 if 语句,在条件 1 不满足的情况下,才会进行条件 2 的判断:当前面的条件均不成立时,才会执行 else 块内的代码.例如,如果考试成绩大于 90 分,则奖励一个 IPHONE 5S ,如果 ...

  5. ng2 学习笔记（一）

    ng2发布了一段时间,最近才开始着手学习一下,ng2可以说变化海是比较大的,现在写一些学习过程中要注意的点,新手可以参考,大神可以指导: 按照文档来吧: 1.快速开始:没什么可说的,直接上git 克隆 ...

  6. 不同局域网如何利用charles对app进行抓包

    晚上遇到了一种尴尬的场景:电脑并没有无线网卡,电脑是通过有线连接的,但是手机连的是公共的wifi,二者并不在同一个网段 在试过很多办法无解后,终于百度出一种"曲线救国"的办法(以荣 ...

  7. SmsUtils 发送短信

    import java.io.InputStream; import java.io.OutputStream; import java.io.OutputStreamWriter; import j ...

  8. idea debug调试快捷键

    F9            resume programe 恢复程序 Alt+F10       show execution point 显示执行断点 F8            Step Over ...

  9. Node.js小白开路（一）-- console篇

    在所有内容的学习之中我们经常首先要接受到的常常很大一部分为命令行或是工具的内容展示,console内容为node.js在命令行中答应数据内容的一个途径. Console是nodejs中的元老级模块了. ...

  10. ComBox绑定枚举

    (转自:http://blog.csdn.net/chao88552828/article/details/9903159) /// <summary> /// 参数枚举 /// < ...