Ui.ScrollToTop

A simple component that shows itself when the page is scrolled some and when clicking on it scrolls the page to the top.

Interactive Demo

You can play around with a Ui.ScrollToTop below using the controls.

Size (16px)
Threshold (0px)
Global
<Ui.ScrollToTop
size={Ui.Size.Px(16)}
global={false}
threshold={0}/>
Size

The size of the component can be set with the size property.

<>
<Ui.ScrollToTop size={Ui.Size.Px(12)} global={false} threshold={0}/>
<Ui.ScrollToTop size={Ui.Size.Px(16)} global={false} threshold={0}/>
<Ui.ScrollToTop size={Ui.Size.Px(20)} global={false} threshold={0}/>
</>
Threshold

The scroll position which determines when to show the button can be set using threshold property.

<>
<Ui.ScrollToTop threshold={400} global={false}/>
<Ui.ScrollToTop threshold={550} global={false}/>
<Ui.ScrollToTop threshold={700} global={false}/>
</>
Global

If the global property is true then the component is added to the body and positioned as fixed to the bottom right of the screen.

Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.