Scroll to the top of the page when navigating between template form steps

Signed-off-by: Stephen Glass <stephen@stephen.glass>

.changeset/loud-turtles-mate.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+---
+
+Scroll to the top of the page when navigating between steps in template forms.

plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx

@@ -37,6 +37,7 @@ import { merge } from 'lodash';
 import {
   ComponentType,
   useCallback,
+  useEffect,
   useMemo,
   useState,
   type ReactNode,
@@ -218,6 +219,13 @@ export const Stepper = (stepperProps: StepperProps) => {
     [validation, analytics],
   );
 
+  useEffect(() => {
+    const main = document.querySelector('main');
+    if (main) {
+      main.scrollTo({ top: 0, behavior: 'auto' });
+    }
+  }, [activeStep]);
+
   const mergedUiSchema = merge({}, propUiSchema, currentStep?.uiSchema);
 
   const [isCreating, setIsCreating] = useState(false);