A simple component that shows itself when the page is scrolled some and when clicking on it scrolls the page to the top.
You can play around with a Ui.ScrollToTop below using the controls.
Ui.ScrollToTop
<Ui.ScrollToTop size={Ui.Size.Px(16)} global={false} threshold={0}/>
The size of the component can be set with the size property.
size
<> <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}/></>
The scroll position which determines when to show the button can be set using threshold property.
threshold
<> <Ui.ScrollToTop threshold={400} global={false}/> <Ui.ScrollToTop threshold={550} global={false}/> <Ui.ScrollToTop threshold={700} global={false}/></>
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.
global
body
fixed
Mint UI is a design system and component library for building websites, web and desktop applications.