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

【问题标题】：Scroll to element within a list (but not to scroll the page)滚动到列表中的元素（但不滚动页面）
【发布时间】：2013-11-11 17:49:43
【问题描述】：

我有一个模态弹出窗口中的项目列表，它具有固定高度和溢出自动，并且有一些带有 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 个选项卡，一个用于城市，另一个用于街道，另一个用于街道编号）。

【问题讨论】：

标签： javascript jquery scroll

【解决方案1】：

您可以查看此帖子：Get position/offset of element relative to a parent container? 并使用该方式获取元素相对于其父元素的位置。

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

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

希望对你有帮助，

问候，

马塞洛

【讨论】：