jscrollpane을 사용하여 scrollTo 또는 scrollToX를 적용 할 때의 문제 - x 좌표로 스크롤하지 않습니다.

Question

x 좌표를 제어하기 위해 네비게이션의 일부 링크를 원하는 수평 스크롤링 사이트가 있으므로 관련된 작업 조각 설정된 위치로 스크롤합니다.

나는 단지 앵커를 사용하여 작동하게 만들었지 만 문제는 앵커가 상단 (또는이 경우 측면)으로 가고 디자인으로 인해 이미지가 탐색 아래에 들어가서 제대로 볼 수 없다는 것입니다. 저는 앵커 # 1과 앵커 # 2를 가지고 있습니다. 앵커 # 2는 앵커 버튼을 클릭하면 X 축에서 580px로 이동합니다.

나는 scrollTo 플러그인을 이런 일이 일어나도록 조정하고 있지만 버튼을 클릭하면 스크롤이 올바른 위치로 이동하지 못하고 왜 그 이유를 이해할 수 없게된다.

나는 또한 내가 그들이 가지고있는 scrollToX을 이용하고 있고 비슷한 결과 그러나이 시도 한 JScrollPane의 함께 읽고

<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> 

을 다음과 같이 내가 scrollTo을 위해 사용하고있는 자바 스크립트입니다 스크롤 아무튼 내가 원하는 위치에있어. 내가 여기에서 찾을 수 있습니다 사용하고 JScrollPane의에 대한

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

자바 스크립트

  <!-- 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> 

내 HTML 코드는 내가 할 방법이다

<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

여기에 있습니다 :

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