I’ve recently been building a new website using Blazor Server. It was coming along nicely except that on the home screen the browser would scroll part way down the page on load.
This was really annoying. The way the home screen was designed, it had a parallax box covering the entire page with the logo and a search box centered within. After this comes an about section with a header and paragraph. On page load it would scroll until the header was about the middle of the screen.
Originally I thought it had to do with the logo being delayed in loading so the page was smaller (therefore more of the page was visible). Once the logo had loaded the page wouldn’t push the contents down. But removing the logo didn’t solve it. As long as the parallax was there it scrolled down.
Eventually I realised that in .Net 6 the Blazor template was changed in the App.razor file and the following line was added:
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
Which sets the focus on load to the first <H1> on the page. This means if you have a page that has a header with the h1 only half way down it will scroll until that is visible. Luckily, you can set this tag on each page, and so I was able to override this for the home page.