Durante la navigazione web, capita di voler spostare l'attenzione dell'utente verso un'area specifica della pagina: nel caso del fallimento di una validazione all'interno di una form, lo scroll della pagina verso il controllo che presenta l'errore, aiuta l'utente alla presa visione e correzione.

All'interno di un'applicazione Blazor, scrivendo metodi che interagiranno con codice javascript, attraverso JSInterop, possiamo raggiungere facilmente l'obiettivo. La procedura ricalca quello abbiamo già visto in uno script precedente (https://www.aspitalia.com/script/1408/Aggiungere-Temi-Custom-Blazor.aspx), nel quale controllavamo il tema dell'applicazione.

Procediamo creando i metodi javascript che permetteranno di muovere la pagina verso uno specifico elemento. All'interno di wwwroot/index.html inseriamo quanto segue

<script>
    function scrollToElement(el) {
        var element = document.getElementById(el);
        element.scrollIntoView();
    }
</script>

A questo punto possiamo richiamare questa funzione all'interno di una pagina Blazor, tramite un'istanza di IJSRuntime.

@page "/"
@inject IJSRuntime JsRuntime

<button @onclick="OnButtonClick" class="btn btn-primary">Scroll</button>
<div>...</div>
<p id="text">Ciao</p>

@code {
    private async void OnButtonClick()
    {
        await JsRuntime.InvokeVoidAsync("scrollToElement","text");
    }
}

Allo stesso modo protremmo prevedere un bottone "Torna in cima", creando in principio la funzione javascript che ci permetterà di tornare in cima alla pagina

<script>
    function scrollToTop() {
        document.documentElement.scrollTop = 0;
    }
</script>

Richiamandola con le stesse modalità mostrate in precedenza all'interno della Razor page

@page "/"
@inject IJSRuntime JsRuntime

<div>...</div>
<button @onclick="ScrollToTop" class="btn btn-primary">Scroll to Top</button>

@code {
    private async void ScrollToTop()
        await JsRuntime.InvokeVoidAsync("scrollToTop");
    }
}