webapp/utils.ts: scrollToTop utils function

Author: JulienVig

webapp/src/components/progress_bars/TestingButtons.vue

@@ -21,6 +21,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+import { scrollToTop } from "@/utils";
 import { useValidationStore } from "@/store";
 import CustomButton from "@/components/simple/CustomButton.vue";
 
@@ -42,7 +43,6 @@ function setStep(index: number): void {
       throw new Error("step out of range");
   }
 
-  const appElement = document.getElementById("base-container");
-  if (appElement !== null) appElement.scrollTop = 0;
+  scrollToTop();
 }
 </script>

webapp/src/components/progress_bars/TrainingButtons.vue

@@ -21,25 +21,22 @@
 <script lang="ts" setup>
 import { useRouter, useRoute } from 'vue-router'
 
+import { scrollToTop } from "@/utils";
 import { useTrainingStore } from "@/store";
 import CustomButton from '@/components/simple/CustomButton.vue'
 
 const router = useRouter()
 const trainingStore = useTrainingStore()
 const route = useRoute()
 
-function scrollToTop() {
-  const appElement = document.getElementById('base-container');
-  if (appElement !== null) appElement.scrollTop = 0;
-}
-
 async function prevStepOrList(): Promise<void> {
-    if (trainingStore.step === 1) {
-        await router.push({ path: '/list' });
-    } else {
-      trainingStore.prevStep();
-      scrollToTop(); // scroll manually
-    }
+  if (trainingStore.step === 1) {
+    await router.push({ path: '/list' });
+    trainingStore.prevStep();
+  } else {
+    trainingStore.prevStep();
+    scrollToTop(); // scroll manually
+  }
 }
 
 function nextStep() {

webapp/src/router/router.ts

@@ -1,5 +1,6 @@
 import createDebug from "debug";
 import { createRouter, createWebHashHistory } from 'vue-router'
+import { scrollToTop } from "@/utils";
 
 import TrainingBar from '@/components/progress_bars/TrainingBar.vue'
 import TestingBar from '@/components/progress_bars/TestingBar.vue'
@@ -19,8 +20,7 @@ const router = createRouter({
     // Always scroll to top when navigating to a new page
     // Because router is wrapped in a BaseLayout, returning { top: 0 } doesn't do anything
     // https://github.com/vuejs/vue-router/issues/3451#issuecomment-975637797
-    const containerId = document.getElementById('base-container');
-    if (containerId) containerId.scrollTop = 0;
+    scrollToTop();
     return { top: 0 }
   },
   routes: [

webapp/src/utils.ts

@@ -0,0 +1,10 @@
+/**
+ * Instantly scrolls to the top of the page without animation.
+ * Because router is wrapped in a BaseLayout, window.scrollTo({ top: 0 }) doesn't work.
+ */
+export function scrollToTop() {
+  const appElement = document.getElementById('base-container');
+  if (appElement !== null) {
+    appElement.scrollTop = 0;
+  }
+}