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

编程问答 2022-04-26

问题描述

| 我有一个轮播样式元素，该元素使用下一个/上一个按钮浏览容器内的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也可以... 谢谢！     

解决方法

        如果窗格是固定宽度，则可以使用简单的数学公式： $（\“＃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}）; }）;