Back To Top React Component
A react component to perform a "back to top" action
Installation
npm install --save react-back2top
Usage
Import the relevant Back2Top component and use it, you can find more on the examples folder of the project
;;;; Component { return <div> <h3> Scroll down for the button to appear </h3> <Back2Top> <FloatingActionButton> <UpIcon/> </FloatingActionButton> </Back2Top> <p> Lorem ipsum dolor sit amet consectetur adipiscing elit Duis consectetur turpis in arcu consectetur a mollis erat rhoncus Suspendisse quam turpis cursus et sapien dignissim ornare suscipit lectus Ut elementum felis ac magna fringilla a semper lacus commodo Vivamus et vehicula orci Pellentesque porta tincidunt arcu a consectetur risus maximus in Aliquam at justo molestie mattis nibh in varius neque Quisque ac tellus egestas malesuada tortor ut luctus dolor Sed facilisis mauris quis fringilla pellentesque Curabitur ullamcorper ut quam vel commodo In tincidunt placerat tempus Morbi nisi ligula tristique in lorem quis blandit iaculis libero Duis sodales purus eget pretium suscipit massa lorem lobortis augue in porta sem felis at lacus Praesent ut condimentum ex </p> ... /* A Long page */ </div> }
Example
The project includes a webpack server for running the examples, just run:
git clone https://github.com/tbolis/react-back2top.gitnpm installnpm start
You can also check the live showcase here: http://tbolis.github.io/showcase/react-back2top/
Features
You can control the behavior of the button with the following component properties
Property | Description |
---|---|
alwaysVisible | Make the button always visible |
fadeDuration | Duration of fade effect |
scrollDuration | Duration of scroll-to-top effect |
visibilityHeight | Height page where button becomes visible |
Issues
See https://github.com/tbolis/react-back2top/issues
Changelog
See https://github.com/tbolis/react-back2top/blob/master/CHANGELOG.md
License
MIT, do remember to add a reference if you find it useful :)