Javascript----实现火箭按钮网页置顶-CSDN博客

1、代码

 <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!--
			火箭2.0版本(火箭的速度先快后慢,当body的scorllTop距离小于8%时,速度变快,并且火箭最终飞出顶部)
		-->
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .web {
        height: 10000px;
        background: linear-gradient(#fff, #000);
    }

    .rocket {
        width: 149px;
        height: 249px;
        background: url(imgs/rocket_button_up.png) 0% 0%;
        position: fixed;
        top: 420px;
        right: 20px;
        cursor: pointer;
    }

    .rocket:hover {
        background-position: -100% 0;
    }
    </style>
    <div class="web">
    </div>
    <div class="rocket" title="点击回到顶部" id='rocket'>
    </div>
    <script type="text/javascript">
    var rocketBtn = document.getElementById("rocket");
    var d1 = parseInt(getComputedStyle(rocketBtn, "position").getPropertyValue("top"));
    var d = d1;
    var s = 2;
    var interVal;
    var rocketSpeed = 10;

    rocketBtn.addEventListener("click", function() {

    	var scrollPosition = window.document.body.scrollTop;

    	console.log(scrollPosition);
     
        interVal = setInterval(function() {
            if(d>-250){
        	   // console.log(d+"/"+(d1+500)+"="+d/(d1+500));
	            if(d/(d1+250)<0.3){
	            	rocketSpeed = 100;
	            }
            }
            if (d >-400) {
                if (s != 6) {
                    s++;
                } else {
                    s = 2;
                }
                rocketBtn.setAttribute("style", "top:" + d);
                d -= rocketSpeed;
                if(rocketSpeed>4){
                    rocketSpeed-=0.2;
                }
                //console.log("d1:" + d1 + "-->d:" + d);
                rocketBtn.style.backgroundPosition = (-100 * s) + "% 0";
                window.document.body.scrollTop -= 1000;
            } else {
                clearInterval(interVal);
            }
        }, 50)

    })
    </script>
</body>

</html>

2、效果