设置滚动位置

我试图设置一个页面上的滚动条位置，这样滚动条就可以一直滚动到顶部。

我想我需要这样的东西，但它不工作:

(function () { alert('hello'); document.body.scrollTop = 0; } ());

有什么想法吗？

259946 次浏览
小开
最佳答案

你可以像这样使用 window.scrollTo():

window.scrollTo(0, 0); // values are x,y-offset
小开

同样值得注意的是 window.scrollBy(dx,dy)(裁判)

小开

请注意，如果希望滚动元素而不是完整窗口，则元素没有 scrollTo和 scrollBy方法。你应该:

var el = document.getElementById("myel"); // Or whatever method to get the element


// To set the scroll
el.scrollTop = 0;
el.scrollLeft = 0;


// To increment the scroll
el.scrollTop += 100;
el.scrollLeft += 100;

你亦可模拟 window.scrollTo及 window.scrollBy的功能，以模拟 不支持它的浏览器网页内所有现有的 HTML 元素:

Object.defineProperty(HTMLElement.prototype, "scrollTo", {
value: function(x, y) {
el.scrollTop = y;
el.scrollLeft = x;
},
enumerable: false
});


Object.defineProperty(HTMLElement.prototype, "scrollBy", {
value: function(x, y) {
el.scrollTop += y;
el.scrollLeft += x;
},
enumerable: false
});

所以你可以这样做:

var el = document.getElementById("myel"); // Or whatever method to get the element, again


// To set the scroll
el.scrollTo(0, 0);


// To increment the scroll
el.scrollBy(100, 100);

注意: 我们鼓励使用 Object.defineProperty，因为直接向 prototype添加属性是一个坏习惯(当你看到它时: ——)。

小开

或者用 documentElement代替 body:

document.documentElement.scrollTop = 0;
小开

如果你想设置 document.body的滚动位置，你可以使用 window.scrollTo() 滚动整个 window; 它需要一对坐标(x，y)或者一个选项对象——如果你只是想很好地滚动到顶部，试试 window.scrollTo({top:0,behavior:'smooth'});。

但是，在某些情况下，您需要滚动一个 元素(而不是整个文档)。对于这种情况，元素还提供使用相同参数的 强 > scrollTo()强方法。

document.querySelector('ul#list').scrollTo(0,0);

提交答案