Rough, to be able to effect, click on the small rocket back to the top, a small rocket during the special effects,
It uses css3 animation, JS rolling event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#firetop {
width: 148px;
height: 250px;
background: url(https://images.cnblogs.com/cnblogs_com/muyun123/1532955/o_rocket_button_up.png);
cursor: pointer;
position: fixed;
bottom: 0;
right: 0;
transition: bottom 1s;
display: none;
}
#firetop:hover {
background-position: -148px 0;
}
body {
width: 100%;
height: 7000px;
}
@keyframes move {
0% {
background-position: -296px 0;
}
100% {
background-position: -892px 0;
}
}
</style>
</head>
<body>
<div id="firetop"></div>
</body>
<script>
( Function () {
var firetop document.getElementById = ( 'firetop' );
// event is triggered when a rolling
window.onscroll = function () {
var NUM = window.scrollY; // Get a moving distance of the scroll bar
var num1 window.innerHeight =; // height of the screen visible area
IF (NUM> 200 is ) {
firetop.style.display = 'Block'; // get back on top of small rocket appears
} the else IF (NUM <= 0 ) {
firetop.style.bottom = num1 + 'PX'; // change the position of the positioning
}
}
// click event
firetop.onclick = function () {
var scrollTop = window.scrollY;
var Timer = the setInterval ( function () { // timer starts
scrollTop - = 50 ;
IF (scrollTop <= - window.innerHeight) {
firetop.style.display = 'none'; // small rocket hidden
firetop.style.animation = ''; // Clear animation
firetop.style.bottom = 0 + 'PX'; // restore the position of small rocket
the clearInterval (Timer);
}
the window.scrollTo ( 0, scrollTop); // set the distance from the top scrollbar
}, 30 );
the this .style = 'Animation: Move 2S Steps (. 4, End) Infinite; ' // to the animation
}
}) ();
</ Script>
</ HTML>
