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 () {
    $('#button_up').fadeIn('slow');
    $('#button_down').fadeIn('slow');
    $('#button_down').click(
    function (e) {
        var posY = $('html').scrollTop();
        posY += 300;
        $('html').animate({
            scrollTop: posY
        }, 800);
    });
    $('#button_up').click(
    function (e) {
        var posY = $('html').scrollTop();
        posY -= 300;
        $('html').animate({
            scrollTop: posY
        }, 800);
    });
});
//]]>