React.js

【React】 Routerの画面遷移でスクロール位置を上まで戻したい

らーめん

ReactのようなSPAは、スクロール位置が前の位置のままになってしまう・・

上までスクロールを戻してくれるコンポーネントを作る

import React, { Component } from 'react';
import { withRouter } from 'react-router'

class ScrollToTop extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0);
    }
  }

  render() {
    return null;
  }
}

export default withRouter(ScrollToTop)
ミソ

componentDidUpdateは、このコンポーネントがmountされたときに呼び出されるもの

つまりこのcomponentを置いてあげれば、
ページ表示時にwindow.scrollTo(0, 0)が実行されてスクロール位置がリセットされる

使ってみる

置くだけでOK

function App() {
  return (
    <Router>
      <ScrollToTop />
      <App />
    </Router>
  );
}

\ 案件のご依頼・ご相談はこちらから /