使用nextjs的Router.push跳转方法时出现了一个奇怪的问题,无法跳转到顶部,百度上大多都是对Vue的解决方案。
netxjs解决方案:
Router.push('/link').then(() => window.scrollTo(0, 0));
其实换汤不换药,都是一个思想,跳转后滚动到顶部。
我觉得最好的实践是通过路由变化监听的方法,只要发生跳转就让他跑到顶部:
// 监听路由跳转结束后,跳转到页面顶部
public routeChangeComplete = () => {
window.scrollTo(0, 0);
};
// 开启和关闭滑动监听
public componentDidMount() {
window.addEventListener('scroll', this.handleScroll, true);
Router.events.on('routeChangeComplete', this.routeChangeComplete);
}
public componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll, true);
Router.events.off('routeChangeStart', this.routeChangeComplete);
}