Hash routing to named element

src/Components/Web.JS/src/DomWrapper.ts

@@ -6,6 +6,7 @@ import '@microsoft/dotnet-js-interop';
 export const domFunctions = {
   focus,
   focusBySelector,
+  focusOnNavigate
 };
 
 function focus(element: HTMLOrSVGElement, preventScroll: boolean): void {
@@ -22,6 +23,12 @@ function focus(element: HTMLOrSVGElement, preventScroll: boolean): void {
   }
 }
 
+function focusOnNavigate(selector: string): void {
+  if ( !(location.hash.length > 1 && elementExists(location.hash.slice(1))) ) {
+    focusBySelector(selector);
+  }
+}
+
 function focusBySelector(selector: string): void {
   const element = document.querySelector(selector) as HTMLElement;
   if (element) {
@@ -35,3 +42,23 @@ function focusBySelector(selector: string): void {
     element.focus();
   }
 }
+
+function elementExists(identifier : string) : boolean {
+  let element : HTMLElement | null = null;
+
+  element = document.getElementById(identifier);
+
+  if (!element) {
+
+    let elements = document.getElementsByName(identifier);
+    if (elements.length > 0) {
+      element = elements[0];     
+    }
+  }
+
+  if (element) {
+    return true;
+  }
+
+  return false;
+}

src/Components/Web.JS/src/Rendering/Renderer.ts

@@ -13,6 +13,8 @@ interface BrowserRendererRegistry {
 }
 const browserRenderers: BrowserRendererRegistry = {};
 let shouldResetScrollAfterNextBatch = false;
+let elementToScrollTo : string | null = null;
+let scrollToElementTimeout : NodeJS.Timeout;
 
 export function attachRootComponentToLogicalElement(browserRendererId: number, logicalElement: LogicalElement, componentId: number, appendContent: boolean): void {
   let browserRenderer = browserRenderers[browserRendererId];
@@ -88,7 +90,46 @@ export function renderBatch(browserRendererId: number, batch: RenderBatch): void
     browserRenderer.disposeEventHandler(eventHandlerId);
   }
 
-  resetScrollIfNeeded();
+  if (elementToScrollTo && scrollToElement(elementToScrollTo)) {
+    elementToScrollTo = null;
+    clearTimeout(scrollToElementTimeout); 
+
+    // We found the element on the page and we don't want to scroll to the top of the page on the next batch
+    shouldResetScrollAfterNextBatch = false; 
+  } else {
+    resetScrollIfNeeded();
+  }  
+}
+
+export function scrollToElement(identifier : string) : boolean {
+  let element : HTMLElement | null = null;
+
+  element = document.getElementById(identifier);
+
+  if (!element) {
+    let elements = document.getElementsByName(identifier);
+    if (elements.length > 0) {
+      element = elements[0];     
+    }
+  }
+
+  if (element) {
+    element.scrollIntoView();
+    return true;
+  }
+
+  return false;
+}
+
+export function setTimeoutToScrollToElement(identifier : string) : void {
+  if (scrollToElementTimeout) {
+    clearTimeout(scrollToElementTimeout);
+  }
+  elementToScrollTo = identifier;
+
+  scrollToElementTimeout = setTimeout( () => {
+    elementToScrollTo = null;
+  }, 5000);
 }
 
 export function resetScrollAfterNextBatch(): void {

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

@@ -2,7 +2,7 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 
 import '@microsoft/dotnet-js-interop';
-import { resetScrollAfterNextBatch } from '../Rendering/Renderer';
+import { resetScrollAfterNextBatch, scrollToElement, setTimeoutToScrollToElement } from '../Rendering/Renderer';
 import { EventDelegator } from '../Rendering/Events/EventDelegator';
 
 let hasEnabledNavigationInterception = false;
@@ -76,8 +76,18 @@ export function attachToEventDelegator(eventDelegator: EventDelegator): void {
     const anchorTarget = findAnchorTarget(event);
 
     if (anchorTarget && canProcessAnchor(anchorTarget)) {
-      const href = anchorTarget.getAttribute('href')!;
-      const absoluteHref = toAbsoluteUri(href);
+      let anchorHref = anchorTarget.getAttribute('href')!; 
+      if (anchorHref.startsWith('#')) {
+        anchorHref = location.hash.length > 1 ? location.href.replace(location.hash, anchorHref) : location.href + anchorHref;
+      }   
+
+      const absoluteHref = toAbsoluteUri(anchorHref);
+
+      if (isSamePageWithHash(absoluteHref)) {
+        event.preventDefault();
+        performScrollToElementOnTheSamePage(absoluteHref);
+        return;
+      }
 
       if (isWithinBaseUriSpace(absoluteHref)) {
         event.preventDefault();
@@ -87,6 +97,24 @@ export function attachToEventDelegator(eventDelegator: EventDelegator): void {
   });
 }
 
+function isSamePageWithHash(absoluteHref : string) : boolean {
+  const hashIndex = absoluteHref.indexOf('#');
+  // Excluding case hash="#"
+  return hashIndex > -1 && absoluteHref.length > hashIndex + 1 &&
+  location.href.replace(location.hash, '') === absoluteHref.substring(0, hashIndex);
+}
+
+function performScrollToElementOnTheSamePage(absoluteHref : string) {
+  const hashIndex = absoluteHref.indexOf('#');
+  var hash = absoluteHref.substring(hashIndex); 
+
+  const urlInBrowser = location.hash.length > 1 ? location.href.replace(location.hash, hash) : location.href + hash;
+  history.pushState({}, "", urlInBrowser);
+
+  var identifier = hash.slice(1);
+  scrollToElement(identifier);
+}
+
 // For back-compat, we need to accept multiple overloads
 export function navigateTo(uri: string, options: NavigationOptions): void;
 export function navigateTo(uri: string, forceLoad: boolean): void;
@@ -152,6 +180,13 @@ async function performInternalNavigation(absoluteInternalHref: string, intercept
   // we render the new page. As a best approximation, wait until the next batch.
   resetScrollAfterNextBatch();
 
+  const hashIndex = absoluteInternalHref.indexOf('#');
+  // Excluding cases when hash="#"
+  if ( hashIndex > -1 && absoluteInternalHref.length > hashIndex + 1) {
+    var identifier = absoluteInternalHref.substring(hashIndex+1);
+    setTimeoutToScrollToElement(identifier);
+  }
+
   if (!replace) {
     currentHistoryIndex++;
     history.pushState({

src/Components/Web/src/DomWrapperInterop.cs

@@ -9,5 +9,5 @@ internal static class DomWrapperInterop
 
     public const string Focus = Prefix + "focus";
 
-    public const string FocusBySelector = Prefix + "focusBySelector";
+    public const string FocusOnNavigate = Prefix + "focusOnNavigate";
 }

src/Components/Web/src/Routing/FocusOnNavigate.cs

@@ -56,7 +56,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         if (_focusAfterRender)
         {
             _focusAfterRender = false;
-            await JSRuntime.InvokeVoidAsync(DomWrapperInterop.FocusBySelector, Selector);
+            await JSRuntime.InvokeVoidAsync(DomWrapperInterop.FocusOnNavigate, Selector);
         }
     }
 

src/Components/test/E2ETest/Tests/RoutingTest.cs

@@ -1546,9 +1546,59 @@ public void CanNavigateBetweenPagesWithQueryStrings()
         AssertHighlightedLinks("With query parameters (none)", "With query parameters (passing string value)");
     }
 
+    [Fact]
+    public void AnchorWithHrefStartingWithHash_ScrollsToElementOnTheSamePage()
+    {
+        SetUrlViaPushState("/");
+        var app = Browser.MountTestComponent<TestRouter>();
+        app.FindElement(By.LinkText("Long page with hash")).Click();
+
+        app.FindElement(By.Id("anchor-test1")).Click();
+
+        var currentWindowScrollY = BrowserScrollY;
+        var test1VerticalLocation = app.FindElement(By.Id("test1")).Location.Y;
+        var currentRelativeUrl = _serverFixture.RootUri.MakeRelativeUri(new Uri(Browser.Url)).ToString();
+        Assert.Equal("subdir/LongPageWithHash#test1", currentRelativeUrl);
+        Assert.Equal(test1VerticalLocation, currentWindowScrollY);
+    }
+
+    [Fact]
+    public void AnchorWithHrefContainingHash_NavigatesToPageAndScrollsToElement()
+    {
+        SetUrlViaPushState("/");
+        var app = Browser.MountTestComponent<TestRouter>();
+        app.FindElement(By.LinkText("Long page with hash")).Click();
+
+        app.FindElement(By.Id("anchor-test2")).Click();
+
+        var currentWindowScrollY = BrowserScrollY;
+        var test2VerticalLocation = app.FindElement(By.Id("test2")).Location.Y;
+        var currentRelativeUrl = _serverFixture.RootUri.MakeRelativeUri(new Uri(Browser.Url)).ToString();
+        Assert.Equal("subdir/LongPageWithHash2#test2", currentRelativeUrl);
+        Assert.Equal(test2VerticalLocation, currentWindowScrollY);
+    }
+
+    [Fact]
+    public void AnchorWithHrefContainingHash_FocusOnNavigateDoesNotHappenAndScrollsToElement()
+    {
+        SetUrlViaPushState("/");
+        var app = Browser.MountTestComponent<TestRouter>();
+        app.FindElement(By.LinkText("Long page with hash")).Click();
+
+        app.FindElement(By.Id("anchor-test3")).Click();
+
+        var currentWindowScrollY = BrowserScrollY;
+        var test3VerticalLocation = app.FindElement(By.Id("test3")).Location.Y;
+        var focusOnNavigateSelectorVerticalLocation = app.FindElement(By.Id("test-info")).Location.Y;
+        var currentRelativeUrl = _serverFixture.RootUri.MakeRelativeUri(new Uri(Browser.Url)).ToString();
+        Assert.Equal("subdir/LongPageWithHash3#test3", currentRelativeUrl);
+        Assert.Equal(test3VerticalLocation, currentWindowScrollY);
+        Assert.NotEqual(focusOnNavigateSelectorVerticalLocation, currentWindowScrollY);
+    }
+
     private long BrowserScrollY
     {
-        get => (long)((IJavaScriptExecutor)Browser).ExecuteScript("return window.scrollY");
+        get => Convert.ToInt64(((IJavaScriptExecutor)Browser).ExecuteScript("return window.scrollY"), CultureInfo.CurrentCulture);
         set => ((IJavaScriptExecutor)Browser).ExecuteScript($"window.scrollTo(0, {value})");
     }
 

src/Components/test/testassets/BasicTestApp/RouterTest/Links.razor

@@ -33,6 +33,7 @@
     <li><a href="/subdir/images/blazor_logo_1000x.png" download>Download Me</a></li>
     <li><NavLink>Null href never matches</NavLink></li>
     <li><custom-link-with-shadow-root target-url="Other"></custom-link-with-shadow-root></li>
+    <li><NavLink href="/subdir/LongPageWithHash">Long page with hash</NavLink></li>
 </ul>
 
 <button id="do-navigation" @onclick=@(x => NavigationManager.NavigateTo("Other"))>

src/Components/test/testassets/BasicTestApp/RouterTest/LongPageWithHash.razor

@@ -0,0 +1,18 @@
+@page "/LongPageWithHash"
+@inject NavigationManager NavigationManager
+
+<a id="anchor-test1" href="#test1">Go to test1 on this page</a>
+<br/>
+<a id="anchor-test2" href="/subdir/LongPageWithHash2#test2">Go to test2 on LongPageWithHash2 page</a>
+<br />
+<a id="anchor-test3" href="/subdir/LongPageWithHash3#test3">Go to test3 on LongPageWithHash3 page (contains focus on navigate selector)</a>
+
+<div style="border: 2px dashed red; margin: 1rem; padding: 1rem; height: 1500px;">
+    Scroll past me to find the links
+</div>
+
+<p id="test1">Test1</p>
+
+<div style="border: 2px dashed red; margin: 1rem; padding: 1rem; height: 1500px;">
+    Scroll past me to find the links
+</div>

src/Components/test/testassets/BasicTestApp/RouterTest/LongPageWithHash2.razor

@@ -0,0 +1,12 @@
+@page "/LongPageWithHash2"
+@inject NavigationManager NavigationManager
+
+<div style="border: 2px dashed blue; margin: 1rem; padding: 1rem; height: 1500px;">
+    Scroll past me to find the links
+</div>
+
+<p id="test2">Test2</p>
+
+<div style="border: 2px dashed blue; margin: 1rem; padding: 1rem; height: 1500px;">
+    Scroll past me to find the links
+</div>

src/Components/test/testassets/BasicTestApp/RouterTest/LongPageWithHash3.razor

@@ -0,0 +1,18 @@
+@page "/LongPageWithHash3"
+@inject NavigationManager NavigationManager
+
+<div style="border: 2px dashed green; margin: 1rem; padding: 1rem; height: 1500px;">
+    Scroll past me to find the links
+</div>
+
+<p id="test3">Test3</p>
+
+<div style="border: 2px dashed green; margin: 1rem; padding: 1rem; height: 1500px;">
+    Scroll past me to find the links
+</div>
+
+<p id="test-info">Focus On Navigate Selector</p>
+
+<div style="border: 2px dashed green; margin: 1rem; padding: 1rem; height: 1500px;">
+    Scroll past me to find the links
+</div>

src/Components/test/testassets/BasicTestApp/RouterTest/WebViewLongPageWithHash.razor

@@ -0,0 +1,31 @@
+@using Microsoft.AspNetCore.Components.Routing
+@inject NavigationManager NavigationManager
+
+<Router AppAssembly="@typeof(BasicTestApp.Program).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" />
+        <FocusOnNavigate RouteData="@routeData" Selector="#test-info" />
+    </Found>
+    <NotFound>
+        <LayoutView Layout="@typeof(RouterTestLayout)">
+            <div id="test-info">Oops, that component wasn't found!</div>
+        </LayoutView>
+    </NotFound>
+</Router>
+
+
+<a id="anchor-test1" href="#test1">Go to test1 on this page</a>
+<br />
+<a id="anchor-test2" href="/subdir/LongPageWithHash2#test2">Go to test2 on LongPageWithHash2 page</a>
+<br />
+<a id="anchor-test3" href="/subdir/LongPageWithHash3#test3">Go to test3 on LongPageWithHash3 page (contains focus on navigate selector)</a>
+
+<div style="border: 2px dashed red; margin: 1rem; padding: 1rem; height: 1500px;">
+    Scroll past me to find the links
+</div>
+
+<p id="test1">Test1</p>
+
+<div style="border: 2px dashed red; margin: 1rem; padding: 1rem; height: 1500px;">
+    Scroll past me to find the links
+</div>