Jquery scroll left, div not body?
<p>I have a jquery horizontal scroller the only thing is the whole body moves whereas I just want the list to move, how do I change it?</p>

<pre><code>$("ul#page_nav li").click(function(){
    var panel_id = $(this).attr('id');
    $('html, body').animate({ scrollLeft: $('ul#page_content li#'+panel_id).position().left }, 900, 'easeInOutExpo');
});

&lt;ul id="page_nav"&gt;  
    &lt;li id="one"&gt;1&lt;/li&gt;
    &lt;li id="two"&gt;2&lt;/li&gt;
    &lt;li id="three"&gt;3&lt;/li&gt;
    &lt;li id="four"&gt;4&lt;/li&gt;
&lt;/ul&gt;

&lt;ul id="page_content"&gt;  
    &lt;li id="one"&gt;one&lt;/li&gt;
    &lt;li id="two"&gt;two&lt;/li&gt;
    &lt;li id="three"&gt;three&lt;/li&gt;
    &lt;li id="four"&gt;four&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
