是否使用javascript将窗口位置更改为特定元素？

Question

假设我有一个很大的元素列表，它们是垂直显示的。

如何使用javascript更改窗口位置，使列表中指定的元素显示在页面顶部？

这种方法适用于主流浏览器(如6+，火狐，safari，chrome)吗？

谢谢

Answer 1

window.scrollTo(xPosition, yPosition)

此方法滚动窗口的内容，指定的坐标成为可视区域的左上角。这两个参数都是整数，它们以像素表示x和y坐标。仅当在窗口的当前可见区域中存在不可见的文档区域，并且窗口滚动条的visible属性必须设置为true (已启用)时，此方法才有用。

将其与code to find an element's position et voilà结合起来！

Answer 2

我在这里使用的是jQuery，但您可以很容易地将逻辑调整到任何其他JS库，甚至POJ：

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4 -- Should move to the top in 5 seconds</li>
    <li>Item 5</li>
</ul>

function changeList(){
    $('li:nth-child(4)').prependTo('ul');
}
$(document).ready(function(){
    var t = setTimeout('changeList()',5000);
});

Demo (请务必查看源代码)

注意:根据他在评论中的请求，更新了代码和演示，不使用ID选择器，而使用setTimeout()。

Answer 3

您还可以使用scrollIntoView函数。当您有一个对想要查看的元素的引用(比如在var el中)时，只需调用el.scrollIntoView (true)将该元素放在窗口的顶部，或者调用el.scrollIntoView (false)将其放在窗口的底部。不幸的是，没有(简单的)方法使元素居中:-(