title: Next/Prev buttons onClick scroll to next and previous <td>'s
body: <p>I'm still learning JavaScript and need some help. I am making next and previous buttons that cause a scroll to the next or previous <code>&lt;td&gt;</code>'s on the page. I'm trying to implement this to the existing structure of a virb site. 
  the markup looks like this: </p>
  
  <pre><code>div id="next"&gt;next&lt;/div&gt;&lt;div id="prev"&gt;prev&lt;/div&gt;
  &lt;table&gt;
  &lt;tr&gt;&lt;td&gt;code that includes img&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;code that includes img&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;code that includes img&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;code that includes img&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;code that includes img&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is the script I'm working with:</p>
  
  <pre><code>jQuery.easing.def = "easeInOutQuad";
      $("#next").click(function (){
          //$(this).animate(function(){
              $('html, body').animate({
                  scrollLeft: $("td").next.offset().left
                   }, 600);
          //});
  
      });​
  </code></pre>
  
  <p><a href="http://jsfiddle.net/garretthaas/kzqVp/5/" rel="nofollow">​Here is the jsFiddle</a> I'm working on</p>