title: Vertical scroll buttons with JavaScript
body: <p>Hello dear colleagues, </p>
  
  <p>I'm trying to find a solution for a website that I'm building. The website is reach in texts and we are trying to give 3 actions to the users. Scroll Up, Scroll Down and Go to Top. </p>
  
  <p>Also I want to represent the whole page height on a bar that will have the same height, no matter how high the content is. In another words, the height of the content will always be represented by a 80px bar and the bar button also will always have 10px height. </p>
  
  <p>For the first problem I'm tyring to use window.scrollBy but it doesn't seem to be working for me. For the second problem I don't really have an ideia yet and I would appreciate any help to put me on the right direction. </p>
  
  <p>Here is my current code and also bellow I'm attaching my Jsfiddle.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="header"&gt;
      &lt;p&gt;header&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="docnav"&gt;
      &lt;button onclick="scrollUp()"&gt;Up&lt;/button&gt;
      &lt;div id="sidescroll"&gt;
          &lt;div id="sidescrollbtn"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;button onclick="scrollDown()"&gt;Down&lt;/button&gt;&lt;br&gt;&lt;br&gt;
      &lt;button onclick="scrollTop()"&gt;Go to Top&lt;/button&gt;&lt;br&gt;&lt;br&gt;
  &lt;/div&gt;
  &lt;div id="maincontent"&gt;
      &lt;p&gt;content&lt;/p&gt;
      &lt;p&gt;content&lt;/p&gt;
      &lt;p&gt;content&lt;/p&gt;
      &lt;p&gt;content&lt;/p&gt;
      &lt;p&gt;content&lt;/p&gt;
      &lt;p&gt;content&lt;/p&gt;
      &lt;p&gt;content&lt;/p&gt;
      &lt;p&gt;content&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="footer"&gt;
      &lt;p&gt;Footer&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#header{width:100%;background:red;height:100px;}
  #docnav{position:fixed;right:0,width:10%;background:red;right:8px;text-align:center;}
  #sidescroll{height:80px;width:10px;background:grey;border:1px solid black;margin:0 auto;}
  #sidescrollbtn{height:10px;width:10px;background:red;margin-top:10px;}
  #maincontent{border:1px solid black;background-color:lightblue;height:1000px;width:500px;margin:0 0 100px 20px;}
  #footer{height:100px;width:100%;background:red;position:fixed;bottom:0;}
  </code></pre>
  
  <p>JAVASCRIPT</p>
  
  <pre><code>function scrollUp()
  {
     window.scrollBy(0,20);
  }
  
  function scrollDown()
  {
     window.scrollBy(0,-20);
  }
  
  function scrollTop()
  {
     window.scrollTo(0,0);
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/vinicius5581/bruetck6/3/" rel="nofollow">http://jsfiddle.net/vinicius5581/bruetck6/3/</a></p>