jQuery实现小火箭动态返回顶部代码

HTML部分

方法一：写在body里面

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

方法二：写在js脚本里面引入body中，在HTML页面中，直接放在<script>..</script>中

var div1=document.createElement("div");
    div1.setAttribute("style","display:none;");
    div1.id="rocket-to-top";    
    
var div2=document.createElement("div");
        div2.setAttribute("style","display:none;display:block;");
    div2.setAttribute("class","level-2");

var div3=document.createElement("div");
    div3.setAttribute("class","level-3");

    document.body.appendChild(div1);
        div1.appendChild(div2);
        div1.appendChild(div3);
    

 

CSS代码部分

在HTML页面中直接放在<style>..</style>中即可

 

#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("https://www.cnblogs.com/images/cnblogs_com/lucky1024/1475118/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("https://www.cnblogs.com/images/cnblogs_com/lucky1024/1475118/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;
}

 JavaScript 部分

在HTML页面中直接放在<script>..</script>中即可

$(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");
    });
});

点击下载： 小火箭图片

至此完成了如本博主页所显示的小火箭返顶效果！