diff --git a/src/common/components/app/App.tsx b/src/common/components/app/App.tsx
index 05e4a60b7..ba2f0573f 100644
--- a/src/common/components/app/App.tsx
+++ b/src/common/components/app/App.tsx
@@ -10,6 +10,7 @@ import theme from './theme';
 import { GlobalNotificationProvider } from '../globalNotification/GlobalNotificationContext';
 import GlobalNotification from '../globalNotification/GlobalNotification';
 import { FeatureFlagsProvider } from '../featureFlags/FeatureFlagsContext';
+import ScrollToTop from '../scrollToTop/ScrollToTop';
 import './app.scss';
 import '../../../assets/styles/reset.css';
 
@@ -17,6 +18,7 @@ const queryClient = new QueryClient();
 
 const App: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Router>
+    <ScrollToTop />
     <Provider store={store}>
       <QueryClientProvider client={queryClient}>
         <ChakraProvider theme={theme}>
diff --git a/src/common/components/scrollToTop/ScrollToTop.tsx b/src/common/components/scrollToTop/ScrollToTop.tsx
new file mode 100644
index 000000000..679019ff1
--- /dev/null
+++ b/src/common/components/scrollToTop/ScrollToTop.tsx
@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+/**
+ * Scroll to top of document when URL pathname changes
+ */
+export default function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}
diff --git a/src/common/hooks/useScrollToTop.ts b/src/common/hooks/useScrollToTop.ts
deleted file mode 100644
index 26e6799d6..000000000
--- a/src/common/hooks/useScrollToTop.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useEffect } from 'react';
-
-/**
- * Scroll to top of window whenever component
- * using this hook mounts and unmounts.
- * Also return the scrollToTop function.
- */
-function useScrollToTop() {
-  function scrollToTop() {
-    window.scrollTo(0, 0);
-  }
-
-  useEffect(() => {
-    scrollToTop();
-
-    return function cleanup() {
-      scrollToTop();
-    };
-  }, []);
-
-  return scrollToTop;
-}
-
-export default useScrollToTop;
diff --git a/src/domain/forms/MultipageForm.tsx b/src/domain/forms/MultipageForm.tsx
index 900d37991..23bc0e210 100644
--- a/src/domain/forms/MultipageForm.tsx
+++ b/src/domain/forms/MultipageForm.tsx
@@ -7,7 +7,6 @@ import Text from '../../common/components/text/Text';
 import { createStepReducer } from './formStepReducer';
 import { Action, ACTION_TYPE, StepperStep } from './types';
 import { SKIP_TO_ELEMENT_ID } from '../../common/constants/constants';
-import useScrollToTop from '../../common/hooks/useScrollToTop';
 
 function LoadingIndicator({ loadingText }: { loadingText?: string }) {
   return (
@@ -78,7 +77,6 @@ const MultipageForm: React.FC<Props> = ({
   notificationText,
 }) => {
   const locale = useLocale();
-  const scrollToTop = useScrollToTop();
 
   const stepReducer = createStepReducer(formSteps.length);
   const initialState = {
@@ -89,7 +87,7 @@ const MultipageForm: React.FC<Props> = ({
 
   function handleStepChange(value: Action) {
     function changeStep() {
-      scrollToTop();
+      window.scrollTo(0, 0);
       dispatch(value);
       if (onStepChange) {
         onStepChange();