0

私は水平スクロール サイトを持っており、ナビゲーションにいくつかのリンクを配置して x 座標を制御したいので、関連する作品が設定された位置にスクロールします。

アンカーを使用するだけで機能するようにしましたが、問題はアンカーが上部 (この場合は側面) に移動し、デザインのために画像がナビゲーションの下に入り、正しく表示されないことです。制御したい 2 つのアンカー #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 に答える