ScrollTo 内部 useEffect 反应组件不起作用

Question

我试图在渲染组件时滚动到组件的顶部。我的代码如下所示：

const Terms = () => {
  
  useEffect(() => {
    window.scrollTo(0, 0);
    console.log("effect rendered");
  }, []);
  
return <>...</>

当我在两个组件之间切换时，它不会滚动到组件的顶部。即使

console.log

每次都按预期渲染，但不是滚动。

Answer 1

解决我的问题的解决方案是：

  useEffect(() => {
     const element = document.getElementById('someId');
     element.scrollIntoView();
  }, []);
  return (<div id="someId"> ... </div>)

感谢大家的想法！

Answer 2

我发现了一个对话，似乎你必须给你想要滚动到的元素一个

id

：

反应组件中的window.scrollTo()？

您的元素：

 <div id="scroller">

const scrollToTop = () => {
  document.getElementById("scroller").scroll(0,0)
}

<button onClick={scrollToTop}>Scroll to Top</button>

将scrollTop放入你体内

useEffect()

，它应该可以工作。

Answer 3

对我来说，问题来自我的 App.css 文件，我为所有元素设置了

scroll-behavior: smooth;

。

为了使页面立即转到顶部，我必须在scrollTo函数中指定我希望滚动行为是即时的。请参阅此修复：

useEffect(() => {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: "instant",
    });
  }, []);

但是，如果你想要平滑的滚动效果，下面的代码就可以实现。

useEffect(() => {
    setTimeout(() => window.scrollTo(0, 0), 100);
  }, []);

应用程序.css

*{
  scroll-behavior: smooth;
}