0

我在模态弹出窗口中有一个项目列表，它具有固定高度和溢出自动，并且有一些带有 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 个项目（例如高度：100 像素；字体为 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 个选项卡，一个用于城市，另一个用于街道，另一个用于街道编号）。

4

1 回答 1

0

您可以查看这篇文章：获取元素相对于父容器的位置/偏移量？并使用这种方式来获取元素相对于其父元素的位置。

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

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

希望这可以帮助，

问候，

马塞洛

于 2013-11-11T18:06:58.880 回答