title: Move scrollbar position by x amount of pixels
body: <p>I have a fixed div size width. i'll denote this as x</p>
  
  <p>I have a fixed div size height.</p>
  
  <p>I want to add buttons to either side of the div allowing the user to navigate right i.e. moving x amount of pixels to the right, i.e. showing the next entry in the div.</p>
  
  <p>Can anyone suggest a solution to this problem?</p>
  
  <p>Here is my current html / css:</p>
  
  <pre><code>&lt;div class="outer_container" style="overflow: scroll; overflow-y: hidden; width:577px; border-style:solid; border-width:5px; border-color:#578278;"&gt;
      &lt;div class="inner_container" style="width: 10000px;"&gt;
  
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td style=" width: 577px; "&gt;
              &lt;div style="text-align:left;  margin: 0px 10px 10px 10px; width:557px; "&gt;
                  &lt;p&gt;Add Comment to the Tesco Catalogue&lt;/p&gt;
                  &lt;form class="comment_form" action="profile" method="post"&gt;
                      &lt;textarea style="resize:none;" maxlength="250" rows="2" cols="65" placeholder="Enter your comment here..."&gt;&lt;/textarea&gt;
                      &lt;input type="submit" value="Submit"/&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;!-- do a for loop here to generate all other items --&gt;
          &lt;td style="width:577px;"&gt;
              &lt;div style="text-align:left; padding: 5px 10px 5px 10px; margin: 0px 10px 10px 10px; width:567px; border-style:solid; border-width:1px; border-color:#578278;"&gt;
                  &lt;p class="comment_username"&gt; User said at such a time&lt;/p&gt;
                  &lt;p class="comment_comment"&gt; Comment ......&lt;/p&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td style="width:577px;"&gt;
              &lt;div style="text-align:left; padding: 5px 10px 5px 10px; margin: 0px 10px 10px 10px; width:567px; border-style:solid; border-width:1px; border-color:#578278;"&gt;
                  &lt;p class="comment_username"&gt; User said at such a time&lt;/p&gt;
                  &lt;p class="comment_comment"&gt; Comment ......&lt;/p&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the <a href="http://jsfiddle.net/EB4UC/" rel="noreferrer">jsfiddle</a></p>
  
  <p>So I want to add two buttons one either side of the div, both of which move x pixels, left or right, obviously left button left e.g. previous comment , right button right, next comment.</p>
  
  <p>So in the html i've created I want the scroll bar to either move left or right 577px at a time, depending on the user click.</p>
  
  <p>Let me know what you think guys!  </p>