设置滚动位置

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

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

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

有什么想法吗?

259946 次浏览

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

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

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

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

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.scrollTowindow.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);