title: jQuery Smooth Horizontal Scroll
body: <p>I've created a long horizontal page and using anchors to navigate to section's within the page. I added a jQuery smooth scrolling function but it's not taking affect?</p>
  
  <p>Here's the navigation:</p>
  
  <pre><code>&lt;ul class="nav"&gt;
  &lt;li&gt;&lt;a href="#starters"&gt;Starters&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#main"&gt;Main Dishes&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#special"&gt;Special Dishes&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#side"&gt;Side Dishes&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Within the content i've added corresponding anchors:</p>
  
  <pre><code>&lt;a name="starters"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>And here's the jQuery function:</p>
  
  <pre><code>$(function() {
  $('ul.nav a').bind('click',function(event){
      var $anchor = $(this);
  
      $('html, body').stop().animate({
          scrollLeft: $($anchor.attr('href')).offset().left
      }, 1500, "easeInOutExpo");
      event.preventDefault();
  });
  });
  </code></pre>
  
  <p>The anchor's work fine, clicking the navigation takes you to the desired section but it <em>jumps</em> instead of scrolling.</p>
  
  <p>Any ideas why??</p>