Default values

If your website follows a normal flow and you have not limited the body or html height, you will not need to do anything to configure it, and the component will behave like the one you've probably already noticed on our website. If you put it at the layout level, it will run on all the pages of your site.

<MudScrollToTop>
    <MudFab Color="Color.Tertiary" Icon="@Icons.Filled.ArrowCircleUp" />
</MudScrollToTop>

Setup

If the element you want to scroll is other than the root element, you can specify it with the Selector property. In this example, we are going to scroll in the container marked with the selector #unique_id_scroll_section. Notice how the button that appears at the bottom right of this container when you scroll changes its color.

Scroll inside this container

Some initial long text

Middle text

Bottom text

<style>
    .example-scroll-section{
        height:300px;
        overflow:auto;
        padding:20px;
    }
    .example-inner-section{
        height:3500px;        
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        padding:3em;
    }
    .example-inner-section>h1, .example-inner-section>h2{
        text-align:center;        
    }
    .visible-custom-position{
        right:80px;
        bottom:40px;
        position:absolute;
        transition:all .2s;
    }
    .hidden-custom-position{
        right:-100px;
        visibility:hidden;
    }
    
</style>

<div class="example-scroll-section" id="unique_id_scroll_section">
    <MudPaper  Elevation="2" Class="example-inner-section" >
        <h1>Scroll inside this container</h1>
        <h2>Some initial long text</h2>
        <h2>Middle text</h2>
        <h2>Bottom text</h2>
        <MudScrollToTop TopOffset="100"
                     Style="z-index:2000"
                     VisibleCssClass="visible-custom-position"
                     HiddenCssClass="hidden-custom-position"
                     Selector="#unique_id_scroll_section"
                     OnScroll="OnScroll">
         
                <MudButton Variant="Variant.Filled"
                           StartIcon="@Icons.Filled.ArrowUpward"
                           Color="Color">
                    Go to top
                </MudButton>

        </MudScrollToTop>
    </MudPaper>
</div>

@code{
    Color Color = Color.Success;
    private void OnScroll(ScrollEventArgs e)
    {
        Color = (e.FirstChildBoundingClientRect.Top*-1) switch
        {
            var x when x<  500 => Color.Primary,
            var x when x < 1500 => Color.Secondary,
            var x when x < 2500 => Color.Tertiary,
            _=>Color.Error
        };
    }
}

Custom content

In the example above, we have used a MudButton as a trigger for the back to top action, but we could have used pretty much anything. The root element of the component is just a transparent span element that allows you to use anything inside. In the next example we show you how to use a custom button, with custom transitions to show and hide.

Scroll inside this container

Some initial long text

Middle text

Bottom text

Scroll to top container 2 😎

<style>    
    .example-scroll-to-top-visible {
        font-size: 20px;
        transition: all 1s;       
        bottom: 10px;
        left:8px;
    }
    .example-scroll-to-top-hidden {       
        visibility: hidden;
        transition: all 1s;
        bottom:10px;
        left:-100%;
    }

    .example-custom-button {
        padding: 12px 24px;
        border-radius: 4px;
        background-color: #ff9800;
        box-shadow: var(--mud-elevation-24);
    }
</style>

<div class="example-scroll-section" id="another_unique_identifier">
    <MudPaper Elevation="2" Class="example-inner-section">
        <h1>Scroll inside this container</h1>
        <h2>Some initial long text</h2>
        <h2>Middle text</h2>
        <h2>Bottom text</h2>
        <MudScrollToTop TopOffset="100"
                     Style="z-index:2001"
                     VisibleCssClass="example-scroll-to-top-visible"
                     HiddenCssClass="example-scroll-to-top-hidden "
                     Selector="#another_unique_identifier">
            <div class="example-custom-button">Scroll to top container 2 😎</div>
        </MudScrollToTop>
    </MudPaper>
</div>

@code{ Color Color = Color.Success;
    private void OnScroll(ScrollEventArgs e)
    {
        Color = (e.FirstChildBoundingClientRect.Top * -1) switch
        {
            var x when x < 500 => Color.Primary,
            var x when x < 1500 => Color.Secondary,
            var x when x < 2500 => Color.Tertiary,
            _ => Color.Error
        };
    } }

Scroll To Top

Default values

Setup

Scroll inside this container

Some initial long text

Middle text

Bottom text

Custom content

Scroll inside this container

Some initial long text

Middle text

Bottom text