console 命令行工具 X clear

console

let rocket = document.querySelector(".rocket");
let isRun = true;

rocket.addEventListener("click", function () {
    if(isRun){
        isRun = false;
        rocket.classList.add("active");
        to_top(1000, 50, 5, document.documentElement.scrollTop);
    }
})

//duration[时长]，times[次数],bottom_now[bottom当前值]
//interval[时间间隔]
function to_top(duration, times, bottom_now, srocll_Top) {
    let interval = duration / times
    bottom_times = (100 - bottom_now) / times;
    srocll_times = srocll_Top / times;
    let count = 0;
    function run() {
        setTimeout(function () {
            bottom_now += bottom_times;
            rocket.style.bottom = `${bottom_now}%`;
            document.documentElement.scrollTop -= srocll_times;
            if (++count * interval == duration) {
                rocket.style = '';
                rocket.classList.remove("active");

                isRun=true;
            } else {
                run()
            }
        }, interval)
    }
    run();
}
document.addEventListener("scroll", function () {
    let scroll_top = document.documentElement.scrollTop;
    if(scroll_top<300 && isRun==true){
         rocket.classList.add("hidden");
    }else{
        rocket.classList.remove("hidden");
    }
})

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>Document</title>
    <script src=""></script>
</head>
<body>
    <div class="rocket hidden"></div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
html,body{
    height: 10000px;
    background: linear-gradient(blue ,pink);
}
.rocket{
    width: 149px;
    height: 249px;
    background: url(https://s1.ax1x.com/2020/10/15/0T2clD.png);
    position: fixed;
    right: 3%;
    bottom: 5%;
    cursor: pointer;
}
.rocket:hover{
    background-position: -100% 0;
}
.active{
    animation: rocket .3s infinite steps(4);
}
.hidden{
    opacity: 0;
}

@keyframes rocket {
    from{
        background-position: -200% 0;
    }
    to{
        background-position: -600% 0;
    }
}