JSFiddle - React, Tailwind, and code Playground

HTML

<div id="MrScrollUp" style="display:none;">
    <div class="MrScrollUp1"></div>
    <div class="MrScrollUp2"></div>
</div>

Прокрутите страницу вниз

CSS

body {
  height: 2000px;
}

#MrScrollUp div {
    width: 149px;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
}

#MrScrollUp .MrScrollUp1 {
    background: url(http://imapo.ru/img/MrScrollUp.png) no-repeat -149px 0;
    opacity: 0;
    height: 250px;
    display: none;
    z-index: 1;
}

#MrScrollUp .MrScrollUp2 {
    background: transparent;
    cursor: pointer;
    display: block;
    z-index: 2;
    height: 150px;
}

#MrScrollUp {
    z-index: 11;
    width: 149px;
    height: 250px;
    display: block;
    overflow: hidden;
    cursor: default;
    position: fixed;
    right: 0;
    top: 95%;
    background: url(http://imapo.ru/img/MrScrollUp.png) no-repeat 0 0;
    margin: -125px 0 0;
    padding: 0;
}

JavaScript

var video_player = [];

function pageInit() {
    menuSelected = 3;
    if (video_player[0]) {
        loadPlayer(video_player[0][0], video_player[0][1], video_player[0][
            2
        ], video_player[0][3])
    }
}

var upAnimate = false;
var anim_time = 500;
var anim_time_short = (anim_time == 0) ? 0 : 350;
var scroll_animate = false;
var menuSelected = false;
var domStart = new Date();

function culculateDomRedy(a) {
    domStop = new Date();
    loadTime = (domStop.getTime() - domStart.getTime());
    if (console) {
        logStr = (a) ? a + " " : "";
        logStr += (loadTime < 1000) ? "cache =>" : "full refresh =>";
        console.log((logStr + loadTime))
    }
}
var rocketFireTimer = false;
var rocketFireState = [0, 0, 0, 1];
var rocketFireFrameLength = 149;
var rocketFireFrameStart = 298;
var rocketFireAnimateTime = 100;
var toLeftFireAnimation = false;

function rocketFireAnimate() {
    for (i = 0; i < rocketFireState.length; i++) {
        if (rocketFireState[i] == 1) {
            rocketFireState[i] = 0;
            if (!toLeftFireAnimation) {
                if ((i + 2) < rocketFireState.length) {
                    rocketFireState[i + 1] = 1
                } else {
                    rocketFireState[0] = 1;
                    toLeftFireAnimation = true
                }
            } else {
                if ((i - 1) < 0) {
                    rocketFireState[1] = 1
                } else {
                    rocketFireState[i - 1] = 1;
                    toLeftFireAnimation = false
                }
            }
            break
        }
    }
    $("#MrScrollUp .MrScrollUp1").css({
        "background-position": "-" + (rocketFireFrameStart + (i *
            rocketFireFrameLength)) + "px 0px",
        display: "block"
    });
    rocketFireTimer = setTimeout("rocketFireAnimate()",
        rocketFireAnimateTime)
}

function initScrollTop() {
        $("#MrScrollUp div.MrScrollUp2").hover(function() {
           ...