Issues with applying scrollTo or scrollToX with jscrollpane - doesn't scroll to x co-ordinates

Question

I have a horizontal scrolling site that I would like some links in the navigation to control the x co-ordinates and so the relevant piece of work will scroll to a set position.

I have made it work just using anchors but the trouble is the anchor goes to the top(or side in this case) and because of the design, the image goes under the navigation and you can't see it properly. I have two anchors #1 and #2 that I wish to control so when clicked on they go to 580px on the x-axis.

I am adapting scrollTo plugin to make this happen but when I click on the button, the scroll doesn't go to the correct position and I can't understand why.

the javascript that I am using for scrollTo is as follows

    <script type="text/javascript" src="includes/jquery.scrollTo-1.4.2-min.js"></script>
    <script type="text/javascript">
    $(function() {
$('#1', '#2').scrollTo( {top:'0px', left:'580px'}, 800 );
    });
    </script>

I have also read with the jscrollpane that I am using that they have a scrollToX and have tried this but with similiar results that the scroll doesn't got to the position that I want.

    <script type="text/javascript">
     $(function() {
var element = $('#1', '#2').jScrollPane({top:'0px', left:'580px'});
 var api = scrollToX(580, animate).bind('click', function () { ('.jsp');
        });  });

javascript for jscrollpane that i am using can be found here

           <!-- the mousewheel plugin -->
    <script type="text/javascript" src="includes/jscrollpane/jquery.mousewheel.js"></script>
    <!-- the jScrollPane script -->
    <script type="text/javascript" src="includes/jscrollpane/jquery.jscrollpane.min.js"></script>
    <!-- the jScrollPane script to resize window and scroll bar -->
    <script type="text/javascript">
        $('.scroll-pane').each(function(){
$this = $(this);
$this.jScrollPane({
    showArrows: false,
    autoReinitialise: true,
    animateScroll: true,
    horizontalDragMinWidth: 100,
    horizontalDragMaxWidth: 100,
    hijackInternalLinks: true
});
var api = $this.data('jsp');
var throttleTimeout;
$(window).bind( 'resize', function() {
    if ($.browser.msie) {
        if (!throttleTimeout) {
            throttleTimeout = setTimeout(
                function(){
                    api.reinitialise();
                    throttleTimeout = null;
                }, 
                50
            );
        }
    } else {
        api.reinitialise();
    }
     });
   });

     </script>

my html snippet is here

    <div id="eventsNav" style="visibility:visible;">
    <ul class="accordion">
    <li><a href="#1">name 1</a></li>
    <li><a href="#1">name 2</a></li>
    <li><a href="#">name 3</a></li>
   <li><a href="page.html#anchor">name 4</a></li>
   <li><a href="#">name 4</li>
    </ul> 

     <div id="content-holder" class="scroll-pane horizontal-only">
      <div id="events">
       <div class="first-content-holder"><a name="anchor" id="first"><img src="images/image.jpg /></a></div><div id="button">
       <div id="expandText" style="display: none;"><div class="expandDiv"><p><span class="redbold">name 1</span><br />
         description
     </p></div></div></div><div class="content-holder"><a name="1" id="1"></a><img src="images/image.jpg"" /></div><div class="text-expander"><a href="#" title="" class="expand"><p><span class="redbold">name 2</span><br />
      description
  </p></a></div><div class="content-holder"><a name="2" id="2"></a><img src="images/image.jpg" /></div><div class="text-expander"><a href="#" title="" class="expand"><p><span class="redbold">name2</span><br />
       description
     </p></a></div>
    </div><!--end events-->
    </div><!--end content holder-->

Answer 1

This is how I do it:

var location = $(scrollToElement).offset().top;
$('.jspPane').animate({'top': -top});