设置滚动位置答案

【问题标题】：Set scroll position设置滚动位置
【发布时间】：2021-11-02 15:35:10
【问题描述】：

我正在尝试设置页面上的滚动位置，以便滚动条一直滚动到顶部。

我想我需要这样的东西，但它不起作用：

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

有什么想法吗？

【问题讨论】：

标签： javascript

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

另外值得注意的是window.scrollBy(dx,dy)(ref)

【讨论】：

【解决方案3】：

请注意，如果您想滚动一个元素而不是整个窗口，则元素没有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 函数模拟到browsers that don't support it natively 上网页中的所有现有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 添加属性是一个坏习惯（当你看到它时:-)。

【讨论】：

这很有帮助，谢谢。但我发现元素确实有 'scrollTo' 方法。见developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo
@Narvalex 这就是第二段所说的。
我指出的参考资料表明这些功能是内置的。无需定义内置方法的属性
@Narvalex 哦，我刚刚读到“没有”，我的错。我必须声明，当时并非所有浏览器都有它，尽管现在很难找到这样的浏览器（如 IE11）。

【解决方案4】：

...或者只是将body替换为documentElement：

document.documentElement.scrollTop = 0;

【讨论】：

【解决方案5】：

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

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

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

【讨论】：