How do you manage router scroll behavior and history position restoration?

WHAT THIS TESTS: This question probes whether you understand the difference between pushState navigations and popstate navigations in client-side routing, and whether you know how to hook into the router itself rather than individual components. The interviewer wants to see that you respect the browser's native history behavior while adding deliberate scroll control.

A GOOD ANSWER COVERS: First, the candidate should mention a centralized scrollBehavior function provided at router initialization, not scattered inside pages. Second, they must explain the savedPosition argument, which is only populated during back or forward popstate navigation, and show the conditional logic: if savedPosition exists, return it; otherwise return top: 0. Third, they should address hash anchors by checking to.hash and returning an object with el set to the hash selector, optionally with behavior set to smooth. Fourth, they should mention async delays by returning a Promise that resolves to the scroll target after a timeout or after a transition event fires, which prevents scroll from racing animated route changes. Fifth, they should note that scrollBehavior only works when the browser supports history.pushState.

COMMON WRONG ANSWERS: A major red flag is manually calling window.scrollTo inside onMounted or useEffect in every route component, because that fragments logic and breaks back and forward restoration. Another mistake is always scrolling to top regardless of navigation type, which destroys the user's history position when they click back. Some candidates suggest CSS-only solutions like scroll-padding for fixed headers but forget that the router hook can also accept offset values relative to an element. Finally, ignoring the Promise-based delay mechanism shows inexperience with transition-heavy applications.

LIKELY FOLLOW-UPS: The interviewer might ask how you would handle a fixed navbar offset without breaking hash links; you could answer by combining el with a top offset or by using scroll-margin in CSS as a fallback. They might also ask how to coordinate scroll with page transition libraries, in which case you would resolve the Promise based on a transition-end event. Another follow-up is cross-browser support: since scrollBehavior requires history.pushState, you should mention graceful degradation for older browsers.

ONE CONCRETE EXAMPLE: In Vue Router, you would pass scrollBehavior to createRouter. The function receives to, from, and savedPosition. If savedPosition is truthy, you return it immediately. If to.hash exists, you return el set to to.hash and behavior set to smooth. For all other navigations, you return top: 0. If your app uses a 300ms page fade transition, you return a Promise that resolves to the desired coordinates after 300ms so the scroll does not jump before the old page disappears.