JSFiddle - React, Tailwind, and code Playground

HTML

<div class='button_up' id='button_up' style='display:none;'></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><div class='button_down' id='button_down' style='display:none;'></div>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big text<br/>
        Some big...

CSS

.button_up {
      padding:7px;
      background-color:white;
      border:1px solid #CCC;
      position:fixed;
      background: white url(http://2.bp.blogspot.com/-yU91VSRT1Eo/Uj68vS9u07I/AAAAAAAABew/bMq2kpMLYec/s1600/up+arrow.png) no-repeat top left;
      background-position:50% 50%;
      width:20px;
      height:20px;
      bottom:300px;
      right:5px;
      white-space:nowrap;
      cursor: pointer;
      border-radius: 3px 3px 3px 3px;
      opacity:0.7;
      filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  }
  .button_down {
      padding:7px;
      background-color:white;
      border:1px solid #CCC;
      position:fixed;
      background: white url(http://4.bp.blogspot.com/-t5Y-GtLGpCU/Uj68vE0y3uI/AAAAAAAABes/urmKppFC-8o/s1600/down+arrow.png) no-repeat top left;
      background-position:50% 50%;
      width:20px;
      height:20px;
      bottom:262px;
      right:5px;
      white-space:nowrap;
      cursor: pointer;
      border-radius: 3px 3px 3px 3px;
      opacity:0.7;
      filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  }

JavaScript

//<![CDATA[
$(function () {
    var timeout;
    $('#button_up').fadeIn('slow');
    $('#button_down').fadeIn('slow');
    $('#button_down').mousedown(
    function (e) {
        var posY = $('html').scrollTop();
        posY += 300;
        $('html').animate({
            scrollTop: posY,
            easing: 'linear'
        }, 400);
        timeout = setInterval(function () {
            var posY = $('html').scrollTop();
            posY += 300;
            $('html').animate({
                scrollTop: posY,
                easing: 'linear'
            }, 400);
        }, 400);

        return false;  
    });
    $('#button_up').mousedown(
    function (e) {
        var posY = $('html').scrollTop();
        posY -= 300;
        $('html').animate({
            scrollTop: posY,
            easing: 'linear'
        }, 400);
        timeout = setInterval(function () {
            var posY = $('html').scrollTop();
            posY -= 300;
            $('html').animate({
                scrollTop: posY,
                easing: 'linear'
            }, 400);
        }, 400);

        return false;  
    });
    
    $('#button_down').mouseup(function () {
        clearInterval(timeout);
        return false;
    });
    $('#button_down').mouseout(function () {
        clearInterval(timeout);
        return false;
    });
    $('#button_up').mouseup(function () {
        clearInterval(timeout);
        return false;
    });
    $('#button_up').mouseout(function () {
        clearInterval(timeout);
        return false;
    });
    
});
//]]>