滚动到列表中的元素（但不滚动页面）

Question

我有一个模态弹出窗口中的项目列表，该列表具有自动溢出的固定高度，并具有一些带有ID的“字母”标题：

<ul id="itemList">
    <div id="c_A">A</div>
    <li>Alpha</li>
    <li>Alpha 2</li>
    <li>Alpha 3</li>
    <div id="c_B">B</div>
    <li>Beta</li>
    <li>Beta 2</li>
    <div id="c_C">C</div>
    <li>Charlie</li>
    <li>Charlie 2</li>
    <li>Charlie 3</li>
    <li>Charlie 4</li>
    <div id="c_D">D</div>
    <li>Dog</li>
    <div id="c_E">E</div>
    <li>Echo</li>
    <div id="c_F">F</div>
    <li>Fox</li>
</ul>

例如，假设高度设置为仅显示4个项目（例如，高度：100px；字体为18），则必须滚动查看其余项目（非常小的示例，实际列表中包含100个项目）。

然后，我还有另一个包含所有字母的列表：

<ul id="letterList">
    <li>
        <div class="letterSelector" onclick="ScrollToID('c_A')" id="sc_A">A</div>
    </li>
    <li>
        <div class="letterSelector" onclick="ScrollToID('c_B')" id="sc_B">B</div>
    </li>
    <li>
        <div class="letterSelector" onclick="ScrollToID('c_C')" id="sc_C">C</div>
    </li>
    <li>
        <div class="letterSelector" onclick="ScrollToID('c_D')" id="sc_D">D</div>
    </li>
    <li>
        <div class="letterSelector" onclick="ScrollToID('c_E')" id="sc_E">E</div>
    </li>
    <li>
        <div class="letterSelector" onclick="ScrollToID('c_F')" id="sc_F">F</div>
    </li>
</ul>

最初，我使用<a href="#c_A">A</a> -但这会将整个页面以及模式弹出窗口“列表”滚动到顶部。 由于事情不在正确的地方，因此会导致错误。

我需要做的是滚动项目列表（#itemList），然后再进行其他操作。 我还没有找到仅滚动特定列表而不滚动整个页面的任何内容。

我在项目中使用jQuery和jQuery UI（模式弹出窗口包含3个标签，一个用于城市，另一个用于街道，另一个用于街道编号）。

Answer 1

您可以查看此帖子： 获取元素相对于父容器的位置/偏移量？ 并使用该方法获取元素相对于其父元素的位置。

然后，您可以将整个列表放置在div（具有相对位置）中，并为列表设置绝对位置。

之后，您可以修改函数以将列表动画化为列表中所需div的位置。 例如，如果第二个div位于顶部100像素，则可以将整个列表移至-100像素顶部，然后第二个div将成为容器内的第一个div。

希望这可以帮助，

问候，

马塞洛