香草 JavaScript：滚动到页面顶部

Question

我可能漏掉了什么，但我无法window.scrollTo(0,0)移至页面顶部。

我正在实施一个粘性 aside，它运行良好。它使用 .getBoundingClientRect() 来获取初始位置。

但是，如果页面滚动了一部分，我刷新页面，它会错误地读取位置，并定位到错误的位置。

虽然我会通过在开头执行 window.scrollTo(0,0) 来解决这个问题，以便页面位于顶部，并且 aside 位于正确的位置。

当我运行代码时，window.scrollTo(0,0)似乎没有任何区别。

让重新加载的 window 从顶部开始的正确方法是什么？

我已经在 Mac 上的 Firefox 上对其进行了测试。 Chrome 和 Safari 给出了类似的行为。

请不要jQuery。

Answer 1

您是否尝试过在 scrollTo 之前等待页面加载？尝试使用 window.onload

window.onload = function(){
    window.scrollTo(0,0);
}

Answer 2

在 javascript 中使用滚动效果转到页面顶部更容易一些：

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

window.scroll({
 top: 0, 
 left: 0, 
 behavior: 'smooth' 
});

注意

我刚刚在更新我的答案时检查了 mozilla 文档，我相信它已经更新了。现在该方法是 window.scroll(x-coord, y-coord) 并且没有提及或显示使用对象参数的示例，您可以在其中将行为设置为平滑。我刚刚尝试了代码，它在 chrome 和 firefox 中仍然有效，并且对象参数仍在规范中。

或者在 Vanilla 中，您可以使用 window.onload 事件和 scrollTo(x,y) 函数

window.onload = function(){
    window.scrollTo(0,0);
}

香草 JavaScript：滚动到页面顶部

Vanilla JavaScript: Scroll to Top of Page

javascript

scrolltop