Javascript / CSS window.scrollTo(0,0） 不起作用

Javascript / CSS window.scrollTo(0,0) not working

本文关键字：不起作用 scrollTo CSS window Javascript      更新时间：2023-09-26

我正在构建一个 Web 应用程序，执行操作时，该 Web 应用程序的一部分需要滚动到顶部。这是使用window.scrollTo(0,0)处理的，它完美运行，直到我在下面添加一些 CSS 样式（我在这个项目中需要）。

有没有人知道为什么下面的 CSS 会停止window.scrollTo(0,0)工作？

* {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

附言我不能在我的情况下使用 jQuery，以防万一有人建议我这样做。

我遇到了同样的问题，这解决了它：

document.getElementById('ELEMENT_ID').scrollIntoView();

其中ELEMENT_ID是要滚动到视图中的对象的 id，在您的情况下，它通常是标题。

请注意，这仅适用于 Firefox 浏览器，因为其他浏览器尚未实现平滑滚动选项（请参阅更多：http://caniuse.com/#feat=scrollintoview）。

尝试替代方案： 

document.body.scrollTop = 0;

我的情况删除了这个块解决了这个问题

html, body {
  overflow-x: hidden;
}

事实证明，正文中的主要元素没有设置高度，这意味着滚动到不起作用，但是过渡 CSS 在 webkit 中自动给出元素高度......修复了 CSS 以给它一个设置的高度，它又可以工作了！

更改

html, body {
  overflow-x: hidden;
}

自 

body {
  overflow-x: hidden;
}

为我工作

我最近在盖茨比项目中遇到了同样的问题。我曾尝试包装 setTimeout 但没有成功。

最终对我有用的是window.scrollTo(0, -1).

我还发现添加以下 CSS 会导致 window.scroll() 和 window.scrollTo() 方法不起作用。

body {
    scroll-behavior: smooth;
}

添加到@basarat的答案中。它工作得很好！

我在 React 中做到了，但在函数中它正在工作并且滚动流畅。

    const scrollToTop = () => {
      document.body.scrollTo({ top: 0, behavior: "smooth" });
   };
相关文章：