在网上找来段使用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. 20162305 实验二 Java面向对象程序设计 实验报告

    20162305 实验二 Java面向对象程序设计 实验报告 实验内容 1.初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承.多态 3.初步掌握UML建模 4.熟悉S.O.L.I.D ...

  2. c语言网络通信杂笔记

    1.sin_addr.s_addr = INADDR_ANY;设置成本地IP 2.pthread_create();线程生成函数 3.在linux下,sleep(1)是睡眠1s

  3. React Native 网络请求封装：使用Promise封装fetch请求

    最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...

  4. idea setting

    input

  5. Jenkins自动打包配置

    当时也是花费了不少时间来配置Jenkins自动打包的问题,觉得还是需要记录一下. 1.安装Jenkins,这个很简单,不需要多说. 2.下载Git Plugin,Gradle Plugin,Andro ...

  6. GIT生成 SSH Key步骤

    //设置user.name和email 提交到git之后会显示用户名(在随意一个目录打开git-bash执行就行)Administrator@DESKTOP-BP3H0HS MINGW64 /d/mi ...

  7. angularjs地址栏传参

    1:路由定义参数 2.controller 3. 4.目标得到参数值

  8. fiddler之使用教程(一)

    一. 什么是fiddler&它可以做什么 fiddler是位于客户端和服务器端的HTTP代理,也是目前最常用的http抓包工具之一.它能够记录客户端和服务器之间的所有HTTP请求,可以针对特定 ...

  9. go语言的一个简单httpserver

    httpserver.go package main import ( "net/http" "flag" "fmt" "log& ...

  10. GitLab使用总结［转］

    http://blog.csdn.net/huaishu/article/details/50475175 GitLab使用总结