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

我有一个carousel样式的元素，它使用next/previous按钮在容器内的div中导航。容器具有固定的宽度，溢出是隐藏的。我想使用links将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也可以

---

谢谢

如果窗格的宽度固定，则可以使用简单数学：

$("#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 }); });

---

你要求重写插件。为什么不直接使用它呢？我正在使用的旋转木马的功能是定制的，因此不包括链接选项-我只是想补充一下。我认为有一种更简单的方法可以滚动到代码行更少的div，而不是使用包含我不需要的代码的插件。嗨，尼尔，到目前为止，代码的内容都在正确的位置，但它没有滚动到位。