Let the browser handle history produced by forwards/backwards actions and enhanced nav handle the history produced by onDocumentClick.

Author: ilonatommy

src/Components/Web.JS/src/Services/NavigationEnhancement.ts

@@ -132,18 +132,25 @@ function onDocumentClick(event: MouseEvent) {
   });
 }
 
-function onPopState(state: PopStateEvent) {
+function removeScrollPositionFromState() {
+  const currentState = history.state || {};
+  const { scrollPosition, ...rest } = currentState;
+  history.replaceState(Object.keys(rest).length ? rest : null, /* ignored title */ '', location.href);
+}
+
+function onPopState(event: PopStateEvent) {
   if (hasInteractiveRouter()) {
     return;
   }
 
   // load the new page
-  const scrollPosition = history.state?.scrollPosition;
-  saveScrollPosition();
   performEnhancedPageLoad(location.href, /* interceptedLink */ false).then(() => {
+    const scrollPosition = event.state?.scrollPosition;
     if (scrollPosition !== undefined &&
       (scrollPosition.X !== window.scrollX || scrollPosition.Y !== window.scrollY)) {
       window.scrollTo(scrollPosition.X, scrollPosition.Y);
+      // let the browser handle scroll restoration for the history produced by forwards/backwards actions
+      removeScrollPositionFromState();
     }
   })
 }

src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/EnhancedNav/PageForScrollPositionTests.razor

@@ -15,6 +15,9 @@
     <NavLink id="do-navigation-with-fragment" href="@($"nav/scroll-to-hash#some-content")">
         Navigation to another page with fragment (scroll-to-hash#some-content)
     </NavLink>
+    <NavLink id="do-navigation" href="@($"nav/scroll-to-hash")">
+        Navigation to another page (scroll-to-hash)
+    </NavLink>
 }
 
 <div style="height: 2000px; border: 2px dashed red;">spacer bottom</div>
@@ -23,10 +26,6 @@
 {
     <h2 id="some-content">Some content</h2>
     <p>This is the content.</p>
-
-    <NavLink id="do-navigation" href="@($"nav/scroll-to-hash")">
-        Navigation to another page (scroll-to-hash)
-    </NavLink>
 }
 
 @code {

src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/EnhancedNav/PageForScrollPositionTestsNoStreaming.razor

@@ -15,6 +15,9 @@
     <NavLink id="do-navigation-with-fragment" href="@($"nav/scroll-to-hash-no-streaming#some-content")">
         Navigation to another page with fragment (scroll-to-hash#some-content)
     </NavLink>
+    <NavLink id="do-navigation" href="@($"nav/scroll-to-hash-no-streaming")">
+        Navigation to another page (scroll-to-hash)
+    </NavLink>
 }
 
 <div style="height: 2000px; border: 2px dashed red;">spacer bottom</div>
@@ -23,10 +26,6 @@
 {
     <h2 id="some-content">Some content</h2>
     <p>This is the content.</p>
-
-    <NavLink id="do-navigation" href="@($"nav/scroll-to-hash-no-streaming")">
-        Navigation to another page (scroll-to-hash)
-    </NavLink>
 }
 
 @code {