ScrollPosition not set to top when navigating to other pages

Question

The web page is designed using a master-slave approach. The master has tabs (left pane) that, when clicked, display the corresponding pages in the slaves (right pane). For example. master has three two tabs "Schemas and Templates" where the schema is shown by default. The user can navigate between these two pages (loaded by the slave page) using the tabs in the left pane (loaded by the master page).

Now, when the user scrolls to a position in the schema page and navigates to the template page, the scroll position is not set to top. But the scrolling behavior is set in the router file.

const createRouter = () =>
  new VueRouter({
     scrollBehavior: () => ({ x: 0, y: 0 }),
     routes:[
     //has all the routes
     ]
});

When setting a breakpoint near the scrollBehavior and observing, the line is hit whenever there is navigation but the scroll position is not set to top when navigating from the architecture to the template page.

However, when scrolling to a specific location in the template page and navigating to the architecture page, that page is set to top.

Also tried writing window.scrollTo(0, 0); function inside Mounted() in templates.ts. Even though it is clicked, the page is not set to top.

Can anyone explain why this is happening? I tried almost every possible solution listed on stackoverflow.

Answer 1

I also encountered this problem in vue. If you want to scroll to the top, you will need to use this trick. Instead of window.scrollTo(0, 0); use it in setTimeout, the timeout is very small.
settimeout(()=>{ window.scrollTo(0, 0); }, 10)
Hope this helps.