diff --git a/frontend/components/ScrollToTop/ScrollToTop.js b/frontend/components/ScrollToTop/ScrollToTop.js new file mode 100644 index 000000000..44e52f7f7 --- /dev/null +++ b/frontend/components/ScrollToTop/ScrollToTop.js @@ -0,0 +1,18 @@ +// @flow +// based on: https://reacttraining.com/react-router/web/guides/scroll-restoration +import { 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 this.props.children; + } +} + +export default withRouter(ScrollToTop); diff --git a/frontend/components/ScrollToTop/index.js b/frontend/components/ScrollToTop/index.js new file mode 100644 index 000000000..0f8823a18 --- /dev/null +++ b/frontend/components/ScrollToTop/index.js @@ -0,0 +1,3 @@ +// @flow +import ScrollToTop from './ScrollToTop'; +export default ScrollToTop; diff --git a/frontend/index.js b/frontend/index.js index 0f050e1ab..7fe3a575c 100644 --- a/frontend/index.js +++ b/frontend/index.js @@ -33,6 +33,7 @@ import Flatpage from 'scenes/Flatpage'; import ErrorAuth from 'scenes/ErrorAuth'; import Error404 from 'scenes/Error404'; +import ScrollToTop from 'components/ScrollToTop'; import Layout from 'components/Layout'; import flatpages from 'static/flatpages'; @@ -91,46 +92,48 @@ render(
- - + + + - - - + + + - - - - - - - + + + + + + + - - - + + + - - - + + + - - + + - - - - - - + + + + + + + {DevTools && }