HTML部分

方法一：写在body里面

方法二：写在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");    });});

点击下载： 

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