在网上找来段使用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. <nginx+PHP>nginx环境下配置支持php7

    [root@redhat7 ~]# wget http://am1.php.net/get/php-7.1.2.tar.gz/from/this/mirror [root@redhat7 ~]# ta ...

  2. linux 基本命令___0003 字符串处理和yum安装软件的路径

    字符串变量的处理 参考链接:SHELL字符串处理技巧 计算字符串的字符数量: ${#str} str="xxx-Lane1_S2_L001_R1_trim.fastq" echo ...

  3. 搭建maven项目步骤

    整体项目结构如下: 第一步 第二步 第三步:删除src目录,只留pom文件 第四步: 第五步: 6 7 8 9 10 11 12

  4. shell script语法高亮和自动缩进的配置

    编辑/etc/profile文件,在文件末尾加一下内容: export TERM=xterm-color 接着让其变为全局变量 source /etc/profile 编辑/etc/vimrc文件,在 ...

  5. mysql 一些属性

    1)定义id,设置int,涉及的属性有: BINARY二进制 UNSIGNED无符号数 UNSIGNED ZEROFILL 在列字段中使用UNSIGNED ZEROFILL属性,如: 插入int(4) ...

  6. 统计mysql数据库中数据表/字段等数量的sql

    1.查询一个表中有多少个字段: SELECT COUNT(*) FROM information_schema. COLUMNSWHERE table_schema = '数据库名'AND table ...

  7. DateTime和DateTimeOffset的区别

    1,DateTime 表示时间上的一刻,通常以日期和当天时间来表示. 2, DateTimeOffset 表示一个时间点,通常以相对于协调世界时(UTC)的日期和时间来表示. 3,下面是微软官方给出的 ...

  8. angular一些常用的方法：

    angular.copy(); 用法:对Object对象的深度拷贝$scope.data = {name:'yanjinyun',age:'11'}; $scope.origData = angula ...

  9. Button之常用事件

    Button之常用事件 一.简介 1.button介绍 本文介绍了Buttonn的点击事件,触摸事件,获得焦点事件 接口分别为:OnClickListener,OnTouchListener,OnFo ...

  10. viewport简介

    Viewport的用处:手机拥有了浏览器的初期,人们并没有专门为移动设备设计页面,造成的直接结果就是,访问的页面是直接将电脑页面进行缩放,操作起来有诸多不便,viewport就是用来解决这个问题的 1 ...