如何使用Javascript将窗口移动x个像素

Question

如何使用Javascript滚动窗口或网页？基本上，我想通过使用Javascript将网页向下移动特定数量的像素，有没有这样做的方法？

- dave

---

什么是网页？是指body标签内的内容还是只想往下滚动？ - haknick

当你说“移动窗口或网页的位置”时，你是否意味着滚动页面并移动视口？ - djlumley

如果页面被调整大小，我如何计算滚动条下移的单位？ - dave

Answer 1

您可以使用以下函数：

window.scrollBy(x,y)

例如

window.scrollBy(0,100)

既然你对“单位”感兴趣（我猜你指的是宽度和高度，因为这里的单位是像素！），那么如果窗口被重新调整大小：

document.height
1527

window.innerHeight
912

---

"太棒了。但是是否有任何方法可以根据窗口大小调整滚动条？"

是的，你可以使用以下事件处理程序：

window.onresize = function() {
    window.scrollBy(..., ...);
}

https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onresize

- ninjagecko

---

太棒了。但是是否有任何方法可以根据窗口大小调整滚动？ - dave

是的，window.onresize，您可能希望在我添加答案时将其添加到问题中 =) - ninjagecko

Answer 2

我以前一直使用jQuery来做这件事，如果你感兴趣的话...

可以使用scrollTop（http://api.jquery.com/scrollTop/）来滚动视口：

 $(window).scrollTop(value)

你可以使用 offset (http://api.jquery.com/offset) 方法来查找元素的当前偏移量：

$(element).offset().top

您也可以通过scrollTop方法查找窗口当前的滚动位置：

$(window).scrollTop()

使用这些方法，您可以找出当前窗口的滚动位置，确定要滚动到哪里，并使用scrollTop从一个部分滚动到另一个部分，或者如果您希望它在一段时间内平稳地动画化- animate ( http://api.jquery.com/animate )。

如果您想基于浏览器调整大小进行事件处理，则只需将函数绑定到resize事件即可：

$(window).bind('resize', myfunction);

- djlumley