使用jQuery滚动到特定元素

Question

我有一个嵌套的div长列表。我正在通过查询字符串传递特定元素的ID（实际上是段落元素），并在加载时打开其div和父元素。然而，由于列表太长，有时打开的元素被隐藏在窗口底部以下。

如何自动滚动用户的浏览器窗口，以便显示的元素位于屏幕顶部？

你可能不需要这个，但为了记录...我的列表看起来像这样：

<div id="div1">
    <p id="1"></p>   
    <div>stuff</div>
    <p id="2"></p>   
    <div>stuff</div>
    <p id="3"></p>   
    <div>stuff</div>
</div>
...
<div id="divN">
    <p id="997"></p>   
    <div>stuff</div>
    <p id="998"></p>   
    <div>stuff</div>
    <p id="999"></p>   
    <div>stuff</div>
</div>

- Bryan

---

以数字开头的 ID 是无效的。 - user113716

是的，是的...那不是真正的代码。 :P - Bryan

Answer 1

你可以使用 scrollIntoView 函数。

$(document).ready(function() {
  $('#divN').get(0).scrollIntoView();
});

- nxt

---

+1 这个答案，但是有一个附加条件：如果目标已经在视野中，则不滚动。@Russ - 就我所知，这被广泛支持。 - user113716

@Russ：我不这么认为，否则它将是一个非常好的功能。但我真的觉得这听起来太美好而不可信。如果它是跨浏览器的，Resig和jQuery核心团队会实现它的。 - jAndy

@Russ 尽管它是非标准的，但在IE 5.5+ Firefox、Chrome和Safari中似乎可以工作。http://www.quirksmode.org/dom/w3c_cssom.html#t23 - nxt

Answer 2

jQuery:

$(document).ready(function(){
   $(document.body).scrollTop($('#divN').offset().top);
});

- jAndy

Answer 3

这可以通过使用Ariel Flesler的scrollTo插件来实现，这是最简单的方法。我以前用过它几次，它很小巧、轻便且运行非常好。

- Russ Cam