In Blazor, you can call a JavaScript method using JavaScript interop to scroll the page to the top position.
In the following code, the button event triggers when the button is clicked and scrolls to the page top.
[Index.razor]
@page "/"
@inject IJSRuntime JsRuntime
<div style="background-color:lightgrey;padding:60px 60px 1000px">
<h2>Blazor App</h2>
This example demonstrates how to scroll to the top based on the button click event.<br />
Scroll down and click the button; it scrolls to the top position.
</div>
<div><br />
<button @onclick="OnButtonClick" class="btn btn-primary">Click Button</button>
</div>
@code {
private async void OnButtonClick()
{
await JsRuntime.InvokeVoidAsync("OnScrollEvent");
}
}[_Host.cshtml]
<body>
. . .
. . .
<script>
// When the user clicks the button, the page scrolls to the top
function OnScrollEvent() {
document.documentElement.scrollTop = 0;
}
</script>
</body>
Share with