Question

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?

$("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');
});

<ul id="page_nav">  
    <li id="one">1</li>
    <li id="two">2</li>
    <li id="three">3</li>
    <li id="four">4</li>
</ul>

<ul id="page_content">  
    <li id="one">one</li>
    <li id="two">two</li>
    <li id="three">three</li>
    <li id="four">four</li>
</ul>

Answer 1

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