jquery - 通过 jQuery 在外部单击时滚动到 DIV 中的 anchor

Question

我有一个滚动部分，其中包含按字母顺序分组的酒店列表。在这个分区之上，我有一个按字母顺序排列的链接索引，单击该索引时，我希望相应的字母顺序项目在该分区内向上滚动。

我花了大约一个小时在网上搜索并尝试了各种技术，但没有找到任何符合我要求的东西，或者至少没有找到我能理解的东西；我不是 jQuery 天才。

如有任何帮助，我们将不胜感激!

Answer 1

您想要的是 element.scrollIntoView(); 这将滚动浏览器窗口/div 以使元素在页面上可见。

例如:fiddle链接

更新:添加了更完整的动态示例。

CSS

#container {
    overflow: auto;
    height: 50px;
}

.scrollto {
    color: blue;
    text-decoration: underline;  
    cursor: pointer;
}

HTML

<span class="scrollto">a</span>  <span class="scrollto">e</span> <span class="scrollto">i</span>

<div id='container'>
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
    <div id="d">d</div>
    <div id="e">e</div>
    <div id="f">f</div>
    <div id="g">g</div>
    <div id="h">h</div>
    <div id="i">i</div>
</div>

JS

$('.scrollto').click(function() {
   $('#' + $(this).text()).get(0).scrollIntoView();
   // or $('#' + $(this).text())[0].scrollIntoView();
});

基本上在这个例子中，我创建了一个小的溢出 div，导致它有一个滚动条。

然后我在其中的 div 标签上使用 id anchor 来标记其中的不同区域。我在 div 外部有一个跨度，可以在单击时自动滚动到溢出的 div 内的某个 anchor 。

---

@Wayne Smallman:根据您评论中的 html 代码，这就是您要使用的内容

$('div#index ul li a').click(function() {
    $($(this).attr('href')).get(0).scrollIntoView();
});

Fiddle Demo