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个锚点来标记其中的不同区域。我在div之外有一个跨度，可以在点击时自动滚动到溢出的div内的某个锚点。

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

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

Fiddle Demo

通过jQuery滚动到外部点击的DIV内的锚点

1 个答案: