jQuery火箭图标返回顶部代码

程序员文章站 2022-05-15 14:54:01

在网上找来段使用jQuery火箭图标返回顶部代码，感觉比较酷，比较炫，大概样式如下，很酷炫哦！如果第一次自定义博客园，需要申请权限点击博客园的【管理】 → 【设置】→ 一直往下拉, 找到【博客侧边栏公告（支持HTML代码）（申请JS权限）】向contact@cnblogs.com 发送邮件， ......

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

jQuery火箭图标返回顶部代码

很酷炫哦！

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

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

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

尊敬的博客园管理员：

请问是否可以帮我开通js权限，我需要一些简单的js来解决问题，例如鼠标点击特效、代码高亮等外观调整。

谢谢您的支持！

如图：

jQuery火箭图标返回顶部代码

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

第一步：

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

<div style="display:none;" id="rocket-to-top">
    <div style="opacity:0;display:block;" class="level-2"></div>
    <div class="level-3"></div>
</div>

<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>

第二步：

找到 -> 页面定制css代码

css代码部分 ↓↓↓↓↓

/* 置顶小火箭样式  start  */
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/hxun/1493052/o_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/hxun/1493052/o_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;
}
/* 置顶小火箭样式  end */

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

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

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

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

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

<!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>
<link href="css/zzsc.css" rel="stylesheet" type="text/css" />
<!-- <script src="js/jquery.js?v=1.83.min" type="text/javascript"></script> -->
<script src="https://blog-static.cnblogs.com/files/hxun/jquery-1.8.3.min.js" 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/hxun/1493052/o_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/hxun/1493052/o_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火箭图标返回顶部代码

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

上一篇：板栗咋吃最好吃呢

下一篇：北魏为什么要推行汉化？迁都是逼不得已的？

jQuery火箭图标返回顶部代码

第一步：

第二步：

css代码部分 ↓↓↓↓↓

仿CSDN Blog返回页面顶部功能实现原理及代码

ASP.NET jQuery 实例之通过控件hyperlink实现返回顶部效果

用jQuery实现的智能隐藏、滑动效果的返回顶部代码

jquery左边浮动到一定位置时显示返回顶部按钮

JavaScript开发中如何使用jQuery实现返回顶部

Vue2返回顶部组件使用分析（附代码）

jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]

jQuery火箭图标返回顶部代码

jQuery 中msgTips 顶部弹窗效果实现代码

用Jquery访问WebService并返回Json的代码第1/3页