react-scrolltop-button ☝️

React component for scrolling to top of the page.

Demo

http://graysonhicks.github.io/react-scrolltop-button/demo/

Install

npm install react-scrolltop-button

Usage

import ScrollTop from "react-scrolltop-button";

Use all defaults

<ScrollTop />

Override/Add to defaults

<ScrollTop
  text="take me to your header"
  distance={100}
  breakpoint={768}
  style={{ backgroundColor: "red" }}
  className="scroll-your-role"
  speed={1000}
  target={75}
  icon={<MyIcon />}
/>

With styled-components

ScrollTop styles can be modified with styled-components as well. Other props are then passed down through your styled component.

const StyledScrollTop = styled(ScrollTop)`
  background-color: red;
`;

<StyledScrollTop
  text="i'm styled with styled-components and some other props are overwritten too"
  distance={100}
  breakpoint={768}
/>;

Note that overriding the style prop for the <MyIcon/> is done one of the same two ways as above.

Props

text

string (default: "back to top")

Desired text to show on desktop version of the button. No text shows on mobile.

distance

number (default: 50)

The distance in pixels from the top of the document that button should show.

breakpoint

number (default: 991)

Screen width in pixels when mobile/desktop buttons switch.

style

object

Standard CSS style object to override or add to default styles.

className

string (default: "react-scrolltop-button" / "react-scrolltop-button-mobile")

Custom class name to be added to component. Is in addition to default react-scrolltop-button and react-scrolltop-button-mobile classes. Base classes are not removed.

speed

number (default: 250)

Duration in milliseconds for scrolling to top .

target

number (default: 0)

Distance in pixels from top of page to scroll up to.

icon

element

A custom React component that is shown on the mobile button.

Contributing

Fully open to contributions, come over to the repo and touch base!