使用/jQuery滚动到特定元素答案

【问题标题】：Scroll to a particular element w/ jQuery使用/jQuery滚动到特定元素
【发布时间】：2011-03-14 23:31:21
【问题描述】：

我有一长串嵌套的 div。我在查询字符串上传递特定元素（实际上是段落元素）的 ID 并打开其 div 和父 onload。但是，列表很长，有时打开的元素隐藏在窗口底部下方。

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

你可能不需要这个，但为了记录……我的列表如下所示：

<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>

【问题讨论】：

ID 不能以数字开头。
是的，是的......这不是实际的代码。 :P

标签： jquery html

【解决方案1】：

您可以使用scrollIntoView 函数。

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

【讨论】：

+1 在这个答案上，但需要注意的是，如果目标已经在视图中，它不会滚动。 @Russ - 据我所知，这得到了广泛的支持。
@Russ：我不这么认为，否则这将是一个非常好的功能。但我真的认为这听起来不错。如果它的跨浏览器，Resig 和 jQuery 核心团队会实现它。
@Russ 虽然它是非标准的，但它似乎至少在 IE 5.5+ Firefox、Chrome 和 Safari 中工作。 quirksmode.org/dom/w3c_cssom.html#t23

【解决方案2】：

jQuery:

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

【讨论】：

【解决方案3】：

最简单的方法是使用 Ariel Flesler's scrollTo plugin。我以前用过几次，它体积小、重量轻，效果很好。

【讨论】：