React钩子窗口.当溢出自动时，scrollTo(0,0)不工作

Question

我现在正在使用React，当我点击一个按钮将我带到另一个页面时，默认情况下它会转到页面的底部。尝试使用窗口。scrollTo (0,0);但它似乎不起作用。

const handleRedirection = () => {
history.push(/home);
window.scrollTo(0, 0);
};

我要访问的页面当前的css设置为

height: calc(100vh - 50px);
overflow: scroll;

想知道是否有解决这个问题的方法。谢谢!🙏

Answer 1

您可以根据路由更改滚动到顶部

试试这个:

import { useLocation } from "react-router-dom";
//your codes code
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
//your codes

同样，你可以把它作为一个顶级组件来应用到你所有的页面