React - 单击按钮转到视口顶部

Posted 2023-02-21

【中文标题】React - 单击按钮转到视口顶部

【英文标题】：React - Click in a button go to top of viewport

【发布时间】：2018-09-13 05:07:50

【问题描述】：

我有一个按钮可以转到不同的页面，这是代码行。我正在使用来自 react-router-dom 的链接：

<Link to="/finefi" className="btn btn-big btn-primary p2">Ingresa a FinEfi</Link>

如果我去 /finefi 输入 URL，它会转到视口的顶部，但如果我单击按钮，它会转到视口的中间。如何解决此问题？

另外，我在同一页面中有一个按钮，（在页面中间）

<Link to="/finefi" className="btn btn-big btn-primary p2 px3">Regístrese</Link>

当我单击该按钮时，我希望它转到同一页面的开头吗？ 在这两种情况下我该怎么做？

【问题讨论】：

react-router scroll to top on every transition的可能重复

你用的是什么版本的 react-router？

【参考方案1】：

React 路由器仅更改窗口 URL，但不会更新文档滚动。您需要在以编程方式更改页面时进行设置，例如：

window.scrollTo(0, 0);

您可能需要为窗口 URL 更改添加诸如侦听器之类的东西，以将滚动设置到最顶部。