经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery火箭图标返回顶部代码
来源：cnblogs　　作者：佩奇er　　时间：2019/6/30 4:43:53　　对本文有异议

 

在网上找来段使用jQuery火箭图标返回顶部代码，感觉比较酷，比较炫，大概样式如下，

 

很酷炫哦！

如果第一次自定义博客园，需要申请权限

点击博客园的【管理】 → 【设置】→ 一直往下拉, 找到【博客侧边栏公告（支持HTML代码）（申请JS权限）】

向contact@cnblogs.com 发送邮件， 为了尽快通过权限申请， 邮件模板如下： 

  1. 尊敬的博客园管理员：
  3. 请问是否可以帮我开通js权限，我需要一些简单的js来解决问题，例如鼠标点击特效、代码高亮等外观调整。
  5. 谢谢您的支持！

如图：

 

 

申请成功后可以进行一下操作

第一步：

点击博客园的【管理】  → 【设置】 → 一直往下拉, 找到【页脚Html代码】，添加如下代码内容

  1. <div style="display:none;" id="rocket-to-top">
  2.     <div style="opacity:0;display:block;" class="level-2"></div>
  3.     <div class="level-3"></div>
  4. </div>
  5.  
  6. <script type="text/javascript">
  7. // jQuery火箭图标返回顶部代码
  8. $(function() {
  9.     var e = $("#rocket-to-top"),
  10.     t = $(document).scrollTop(),
  11.     n,
  12.     r,
  13.     i = !0;
  14.     $(window).scroll(function() {
  15.         var t = $(document).scrollTop();
  16.         t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({
  17.             marginTop: "-1000px"
  18.         },
  19.         "normal",
  20.         function() {
  21.             e.css({
  22.                 "margin-top": "-125px",
  23.                 display: "none"
  24.             }),
  25.             i = !0
  26.         })) : e.fadeIn("slow")
  27.     }),
  28.     e.hover(function() {
  29.         $(".level-2").stop(!0).animate({
  30.             opacity: 1
  31.         })
  32.     },
  33.     function() {
  34.         $(".level-2").stop(!0).animate({
  35.             opacity: 0
  36.         })
  37.     }),
  38.     $(".level-3").click(function() {
  39.         function t() {
  40.             var t = e.css("background-position");
  41.             if (e.css("display") == "none" || i == 0) {
  42.                 clearInterval(n),
  43.                 e.css("background-position", "0px 0px");
  44.                 return
  45.             }
  46.             switch (t){
  47.             case "0px 0px":
  48.                 e.css("background-position", "-298px 0px");
  49.                 break;
  50.             case "-298px 0px":
  51.                 e.css("background-position", "-447px 0px");
  52.                 break;
  53.             case "-447px 0px":
  54.                 e.css("background-position", "-596px 0px");
  55.                 break;
  56.             case "-596px 0px":
  57.                 e.css("background-position", "-745px 0px");
  58.                 break;
  59.             case "-745px 0px":
  60.                 e.css("background-position", "-298px 0px");
  61.             }
  62.         }
  63.         if (!i) return;
  64.         n = setInterval(t, 50),
  65.         $("html,body").animate({scrollTop: 0},"slow");
  66.     });
  67. });
  68. </script>

 

第二步：

找到 -> 页面定制CSS代码

CSS代码部分  ↓↓↓↓↓

  1. /* 置顶小火箭样式  start  */
  2. body{height:3000px;}
  4. #rocket-to-top div {
  5.     left: 0;
  6.     margin: 0;
  7.     overflow: hidden;
  8.     padding: 0;
  9.     position: absolute;
  10.     top: 0;
  11.     width: 149px;
  12. }
  13. #rocket-to-top .level-2 {
  14.     background: url("http://images.cnblogs.com/cnblogs_com/hxun/1493052/o_o_rocket_button_up.png") no-repeat scroll -149px 0 transparent;
  15.     display: none;
  16.     height: 250px;
  17.     opacity: 0;
  18.     z-index: 1;
  19. }
  20. #rocket-to-top .level-3 {
  21.     background: none repeat scroll 0 0 transparent;
  22.     cursor: pointer;
  23.     display: block;
  24.     height: 150px;
  25.     z-index: 2;
  26. }
  27. #rocket-to-top {
  28.     background: url("http://images.cnblogs.com/cnblogs_com/hxun/1493052/o_o_rocket_button_up.png") no-repeat scroll 0 0 transparent;
  29.     cursor: default;
  30.     display: block;
  31.     height: 250px;
  32.     margin: -125px 0 0;
  33.     overflow: hidden;
  34.     padding: 0;
  35.     position: fixed;
  36.     right: 0;
  37.     top: 80%;
  38.     width: 149px;
  39.     z-index: 11;
  40. }
  41. /* 置顶小火箭样式  end */

最后拉到下面点保存即可。

 

注意，css部分的图片路径可自行下载到自己的博客园，方式：

把图片另存本地 然后进博客园 -> 管理 -> 相册 -> 添加相册然后命名 -> ADD -> 管理照片 -> 上传本地图片 -> ADD

鼠标点击图片，会进入图片展示页，再点鼠标右键，在新标签页中打开图片，会看到地址栏路径：http://images.cnblogs.com/cnblogs_com/xxxxx/1493052/xxxx.png 然后替换 

 

 

参考站长之家源码：（处理过静态文件路径可直接保存打开看效果）

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jQuery火箭图标返回顶部代码 - 站长素材</title>
  6. <link href="css/zzsc.css" rel="stylesheet" type="text/css" />
  7. <!-- <script src="js/jquery.js?v=1.83.min" type="text/javascript"></script> -->
  8. <script src="https://blog-static.cnblogs.com/files/hxun/jquery-1.8.3.min.js" type="text/javascript"></script>
  9.  
  10. <style type="text/css">
  11. body{height:3000px;}
  12.  
  13. /*回到顶部*/
  14. #rocket-to-top div {
  15.     left: 0;
  16.     margin: 0;
  17.     overflow: hidden;
  18.     padding: 0;
  19.     position: absolute;
  20.     top: 0;
  21.     width: 149px;
  22. }
  23. #rocket-to-top .level-2 {
  24.     background: url("http://images.cnblogs.com/cnblogs_com/hxun/1493052/o_o_rocket_button_up.png") no-repeat scroll -149px 0 transparent;
  25.     display: none;
  26.     height: 250px;
  27.     opacity: 0;
  28.     z-index: 1;
  29. }
  30. #rocket-to-top .level-3 {
  31.     background: none repeat scroll 0 0 transparent;
  32.     cursor: pointer;
  33.     display: block;
  34.     height: 150px;
  35.     z-index: 2;
  36. }
  37. #rocket-to-top {
  38.     background: url("http://images.cnblogs.com/cnblogs_com/hxun/1493052/o_o_rocket_button_up.png") no-repeat scroll 0 0 transparent;
  39.     cursor: default;
  40.     display: block;
  41.     height: 250px;
  42.     margin: -125px 0 0;
  43.     overflow: hidden;
  44.     padding: 0;
  45.     position: fixed;
  46.     right: 0;
  47.     top: 80%;
  48.     width: 149px;
  49.     z-index: 11;
  50. }
  51. </style>
  52.  
  53.  
  54. <script type="text/javascript">
  55.  
  56. // jQuery火箭图标返回顶部代码
  57. $(function() {
  58.     var e = $("#rocket-to-top"),
  59.     t = $(document).scrollTop(),
  60.     n,
  61.     r,
  62.     i = !0;
  63.     $(window).scroll(function() {
  64.         var t = $(document).scrollTop();
  65.         t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({
  66.             marginTop: "-1000px"
  67.         },
  68.         "normal",
  69.         function() {
  70.             e.css({
  71.                 "margin-top": "-125px",
  72.                 display: "none"
  73.             }),
  74.             i = !0
  75.         })) : e.fadeIn("slow")
  76.     }),
  77.     e.hover(function() {
  78.         $(".level-2").stop(!0).animate({
  79.             opacity: 1
  80.         })
  81.     },
  82.     function() {
  83.         $(".level-2").stop(!0).animate({
  84.             opacity: 0
  85.         })
  86.     }),
  87.     $(".level-3").click(function() {
  88.         function t() {
  89.             var t = e.css("background-position");
  90.             if (e.css("display") == "none" || i == 0) {
  91.                 clearInterval(n),
  92.                 e.css("background-position", "0px 0px");
  93.                 return
  94.             }
  95.             switch (t){
  96.             case "0px 0px":
  97.                 e.css("background-position", "-298px 0px");
  98.                 break;
  99.             case "-298px 0px":
  100.                 e.css("background-position", "-447px 0px");
  101.                 break;
  102.             case "-447px 0px":
  103.                 e.css("background-position", "-596px 0px");
  104.                 break;
  105.             case "-596px 0px":
  106.                 e.css("background-position", "-745px 0px");
  107.                 break;
  108.             case "-745px 0px":
  109.                 e.css("background-position", "-298px 0px");
  110.             }
  111.         }
  112.         if (!i) return;
  113.         n = setInterval(t, 50),
  114.         $("html,body").animate({scrollTop: 0},"slow");
  115.     });
  116. });
  117. </script>
  118.  
  119. </head>
  120. <body>
  121. <center>
  122. <h2>jQuery火箭图标返回顶部代码</h2>
  123. <h3>滚动滑动条后，查看右下角查看效果。很炫哦！！</h3>
  124. </center>
  125.  
  126. <!-- 火箭 -->
  127. <div style="display: none;" id="rocket-to-top">
  128.     <div style="opacity:0;display: block;" class="level-2"></div>
  129.     <div class="level-3"></div>
  130. </div>
  131.  
  132. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  133. <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
  134. <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
  135. </div>
  136. </body>
  137. </html>

完毕！

创作不易，留个赞再走呗！

 

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

原文链接：http://www.cnblogs.com/hxun/p/11108541.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号