JSFiddle - React, Tailwind, and code Playground

HTML

<body id='main'>
    <div id='up'></div>
    <div id='down'></div>
    <img src='http://wallpapersfor.me/wp-content/uploads/2012/02/cute_cat_praying-1280x800.jpg'>
    <img src='http://wallpapersfor.me/wp-content/uploads/2012/02/cute_cat_praying-1280x800.jpg'>
</body>

CSS

#up {
    height:50px;
    width:50px;
    background:url(http://www.clker.com/cliparts/7/4/8/a/11949868861761136416arrow01_4.svg);
    background-size:50px 50px;
    position:fixed;
}
#down {
    position:fixed;
    bottom:0;
    height:50px;
    width:50px;
    background:url(http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png);
    background-size:50px 50px;
}
body {
    overflow-y: hidden;
    height:2000px;
}

JavaScript

var down = document.getElementById('down'),
    up = document.getElementById('up'),
    body = document.body;

var timeout;
down.onmouseover = function (e) {
    timeout = setInterval(function () {        
        window.scrollBy(0, 7);
    }, 20)
};
down.onmouseout = function (e) {
    if (timeout) {
        clearInterval(timeout);
    }
};

up.onmouseover = function (e) {
    timeout = setInterval(function () {     
        window.scrollBy(0, -7);
    }, 20)
};
up.onmouseout = function (e) {
    if (timeout) {
        clearInterval(timeout);
    }
};


// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36, backspace: 8
var keys = [37, 38, 39, 40, 32, 34, 33, 35, 36, 8];

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function keydown(e) {
    for (var i = keys.length; i--;) {
        if (e.keyCode === keys[i]) {
            preventDefault(e);
            return;
        }
    }
}

function wheel(e) {
  preventDefault(e);
}