如果我们项目中使用react-router
,使用路由进行页面的跳转,跳转后的页面并不一定在顶部,而是在跳转前页面的相同位置。
这是因为两个页面共享了同一个history
,导致浏览的位置也被记录下来了,显然这样用户体验极差。
但是也很好解决,在跳转后的组件中,让其自动回到顶部即可。
使用函数组件:
// 返回顶部
useEffect(() => {
window.scrollTo(0, 0);
}, []);
使用类组件:
componentDidMount(){
// 返回顶部
window.scrollTo(0, 0);
}