Changed implementation to use ScrollToTop component instead of

useScrollToTop hook and that scroll to top is done in each page
change instead of just forms.

src/common/components/app/App.tsx

@@ -10,13 +10,15 @@ 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';
 
 const queryClient = new QueryClient();
 
 const App: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Router>
+    <ScrollToTop />
     <Provider store={store}>
       <QueryClientProvider client={queryClient}>
         <ChakraProvider theme={theme}>

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;
+}

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();