Posted at

画面遷移の際に位置をtopに戻す方法【React】


概要

画面遷移(URL移動)の際に画面の位置をトップに戻したい

ちょっとしたコード書くだけで解決できた

(ちなみにReactで作成したcomponentです)


実装


this.setState(() => window.scrollTo(0, 0));

Componentのよしななタイミングでこれをセットしてあげると画面位置がトップになります。


簡易な例でいうと、


componentDidMount() {
this.setState(() => window.scrollTo(0, 0));
}

これで画面遷移してきたページで前のページのlocationに影響されずに画面の位置がトップになります。


出典元

https://stackoverflow.com/questions/57534882/how-to-reset-scroll-position-on-single-page-pagination