How to modify default router scroll behavior

[ylli2000]

Story:
If I have a music app, the home page is a long list of songs that scrolls down 3-4 screens long. When clicking a song, it goes into the detail page of that song.

Scenario:

1. I scroll to the bottom of the home screen and click the last song to visit its detail page.
2. I click back to return to the home screen.

Expected behavior:

1. it visits the detail page at the top of the screen scrolling position. i.e. top: 0
2. it returns to the home screen list at the bottom of the screen. i.e. top: pageHeight - screenHeight

Current behavior:

1. it visits the detail page at the bottom of the screen. i.e. top: pageHeight - screenHeight <<< not expecting this, I should see the top of the song detail page
2. it returns to the home screen list at the bottom of the screen. i.e. top: pageHeight - screenHeight

Now, if at step 2., before I return to home page, I first scroll back to the top: 0 of the detail page screen, then hit the back button to return to home page, router will also scroll to the top of the screen at home page at top: 0, <<< also not expecting this, because I clicked the last song at the bottom of the page, I would expect to return to the bottom of the page

I would expect the router to remember the home screen position and scroll to the bottom at top: pageHeight - screenHeight

I have disabled this behavior by hardwiring the scrolling behavior to always get back to the top of the screen at top:0:

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior() {
    //e.g. when navigating from the bottom of a long list page to a detail page
    //prevent route between pages from staying at the bottom
    return { top: 0, left: 0 };
  },
});

As you can see, this is not perfect. How do I get the wanted behavior, which is to let the router remember the correct page position when returning to the home page, and not go to the wrong position when visiting the detail page?

[Deckluhm]

scrollBehavior third argument stores the saved scrolling position.

You can use it to do the following:

scrollBehavior(_to, _from, savedPosition) {
  return savedPosition || { top: 0 }
}

• If you are navigating to a new page, savedPosition is null so it will scroll to the top
• If you are using the back or forward browser button, savedPosition is used instead

This is described on this page, written in a slightly different (but equivalent) way: https://router.vuejs.org/guide/advanced/scroll-behavior.html