Scroll Behavior issue with Vue Router and Vite

I've set up a front-end environment with Vue.js, Vite, and Vue Router.

When I navigate between pages, the scroll position is remembered, causing the new page to start at the previous location instead of the top. The expected behavior is for navigation (not using the back button) to always begin at the top of the new page. The back button functionality, where it remembers the previous scroll position, works correctly.

I've tried using the scrollBehavior option in Vue Router, but it doesn't seem to be working as expected.

Here's the code I've used for the router configuration:

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // My routes here
  ],
  scrollBehavior(to, from, savedPosition) {
    // This is the part that doesn't seem to have any effect.
    // I want to always scroll to the top on new navigation.
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  },
});

I've also checked the documentation and other online resources, but I can't figure out why this isn't working.