Question

我有一个轮播样式元素，它使用下一个/上一个按钮来浏览容器内的div。容器具有固定的宽度，并且溢出被隐藏。我想使用链接将div滚动到容器的子元素的位置，该元素的ID与链接的锚点匹配。

链接标记：

<div class="time-range">

   <ul id="time-nav">
      <li><a href="#1" id="1pm" class="time-chooser">1pm</a></li>
      <li><a href="#2" id="2pm" class="time-chooser">2pm</a></li>
      <li><a href="#3" id="3pm" class="time-chooser">3pm</a></li>
      <li><a href="#4" id="4pm" class="time-chooser">4pm</a></li>
      <li><a href="#5" id="5pm" class="time-chooser">5pm</a></li>
      <li><a href="#6" id="6pm" class="time-chooser">6pm</a></li>
   </ul>

</div>

轮播标记：

<div class="pane-container">
   <div class="carousel-pane" id="1">BLAH BLAH BLAH</div>
   <div class="carousel-pane" id="2">BLAH BLAH BLAH</div>
   <div class="carousel-pane" id="3">BLAH BLAH BLAH</div>
   <div class="carousel-pane" id="4">BLAH BLAH BLAH</div>
   <div class="carousel-pane" id="5">BLAH BLAH BLAH</div>
   <div class="carousel-pane" id="6">BLAH BLAH BLAH</div>
</div>

我正在使用jQuery库，我只是不想为这一功能使用额外的插件。

常规Javascript也可以......

谢谢！

Answer 1

如果窗格是固定宽度，您可以使用简单的数学运算：

$("#time-nav").delegate("a","click",function(e) {
   var $link = $(e.target);
   $("#pane-container").animate({scrollLeft:parseInt($link.attr("id")) * YOUR_WIDTH});
});

如果宽度变化，则需要获取偏移量。这需要您的父母定位

$("#time-nav").delegate("a","click",function(e) {
   var $link = $(e.target);
   var offset = $("#pane-container").find("div[id=" + parseInt($link.attr("id")) + "]")[0].offsetLeft;
   $("#pane-container").animate({scrollLeft:offset });
});

jQuery - 如果不使用插件，如何将点击的链接滚动到其子元素的位置，该元素的ID与链接的锚点匹配？

1 个答案: