0

我有一个水平滚动站点，我希望导航中的一些链接来控制 x 坐标，因此相关的工作将滚动到设定的位置。

我只使用锚点使其工作，但问题是锚点位于顶部（或在本例中为侧面），并且由于设计原因，图像位于导航下方，您无法正确看到它。我有两个想要控制的锚 #1 和 #2，所以当点击它们时，它们会转到 x 轴上的 580px。

我正在调整 scrollTo 插件来实现这一点，但是当我点击按钮时，滚动没有到达正确的位置，我不明白为什么。

我用于 scrollTo 的 javascript 如下

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

我还阅读了我正在使用的 jscrollpane，他们有一个 scrollToX 并尝试了这个，但结果相似，滚动没有到达我想要的位置。

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

我正在使用的 jscrollpane 的 javascript 可以在这里找到

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

1 回答 1

1

我就是这样做的：

var location = $(scrollToElement).offset().top;
$('.jspPane').animate({'top': -top});
于 2013-03-27T21:13:31.500 回答