Fixed issue where scrolling was preserved when navigating

workspaces/ui/src/App.js

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect } from 'react';
 import './App.css';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { appTheme } from './theme';
-import { BrowserRouter, Route } from 'react-router-dom';
+import { BrowserRouter, Route, useLocation } from 'react-router-dom';
 import { SnackbarProvider } from 'notistack';
 import { ThemeProvider } from '@material-ui/core/styles';
 import TopLevelRoutes from './entrypoints';
@@ -32,7 +32,7 @@ class App extends React.Component {
       </React.Fragment>
     );
   }
-  // Life cylce methods
+  // Life cycle methods
   // ------------------
   static getDerivedStateFromError(error) {
     // Update state so the next render will show the fallback UI.
@@ -106,4 +106,5 @@ function AppError() {
   );
 }
 
+
 export default App;

workspaces/ui/src/components/Page.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useContext, useState } from 'react';
 import Navbar from './navigation/Navbar';
+import { useLocation } from 'react-router-dom'
 import { makeStyles } from '@material-ui/core/styles';
 
 const PageContext = React.createContext(null);
@@ -33,6 +34,14 @@ export default function Page(props) {
     document.title = `${title} - Optic`;
   }, [title]);
 
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    if (props.scrollToTop) {
+      window.scrollTo(0, 0);
+    }
+  }, [pathname]);
+
   return (
     <PageContext.Provider value={pageContext}>
       <div className={classes.root}>{props.children}</div>;

workspaces/ui/src/components/docs/DocsPage.js

@@ -75,7 +75,7 @@ const useStyles = makeStyles((theme) => ({
 export const DocsPage = ({ match, specService }) => {
   const routerPaths = useRouterPaths();
   return (
-    <Page title="Documentation">
+    <Page title="Documentation" scrollToTop={true}>
       <Page.Navbar mini={true} />
       <Page.Body>
         <Switch>