Enhancing User Experience with Smooth Scrolling 📜

src/components/Navigator/NavigatorCard.vue

@@ -933,6 +933,7 @@ export default {
       this.$refs.scroller.$el.scrollBy({
         top: offsetHeight * positionIndex,
         left: 0,
+        behavior: 'smooth',
       });
     },
     handleFocusOut(event) {

src/components/Tutorial/Assessments.vue

@@ -144,7 +144,11 @@ export default {
       element.scrollIntoView(true);
 
       // Scroll down to display the content below the navigation bar.
-      window.scrollBy(0, -this.navigationBarHeight - additionalOffset);
+      window.scrollBy({
+        top: -this.navigationBarHeight - additionalOffset,
+        left: 0,
+        behavior: 'smooth',
+      });
     },
     onSubmit() {
       this.$nextTick(() => {

src/mixins/scrollToElement.js

@@ -26,7 +26,11 @@ export default {
       element.scrollIntoView();
       // if not scrolled to the bottom, use the offset
       if (window.scrollY + window.innerHeight < document.body.scrollHeight) {
-        window.scrollBy(-offset.x, -offset.y);
+        window.scrollBy({
+          top: -offset.y,
+          left: -offset.x,
+          behavior: 'smooth',
+        });
       }
       return element;
     },

src/utils/router-utils.js

@@ -89,7 +89,11 @@ export async function restoreScrollOnReload() {
     // one tick for the page to render
     // a second tick for the data to be rendered
     await waitFrames(2);
-    window.scrollTo(scrollPosition.x, scrollPosition.y);
+    window.scrollTo({
+      top: scrollPosition.y,
+      left: scrollPosition.x,
+      behavior: 'smooth',
+    });
   }
 }
 

src/utils/scroll-lock.js

@@ -160,7 +160,11 @@ export default {
       document.body.style.removeProperty('width');
 
       // restore scrolled Y position after resetting the position property
-      window.scrollTo(0, Math.abs(scrolledClientY));
+      window.scrollTo({
+        top: Math.abs(scrolledClientY),
+        left: 0,
+        behavior: 'smooth',
+      });
     }
     isLocked = false;
   },