GuiWukai/react-back-to-top-button

A React component that scrolls back to the top.

React-back-to-top-button

A React component that scrolls back to the top.

Installation

With npm:

npm install @guiwukai/react-back-to-top-button

With yarn:

yarn add @guiwukai/react-back-to-top-button

Example

import React, { Component } from "react";
import BackToTop from "react-back-to-top-button";

class App extends Component {
  render() {
    return (
      <BackToTop
        showOnScrollUp
        showAt={100}
        speed={1500}
        easing="easeInOutQuint"
      >
        <span>scroll up</span>
      </BackToTop>
    );
  }
}

Props

Prop	Required	Default	Type	Description
children		"UP"	React.ReactElement / string	content of the back to top component
scrollTo		0	number	scroll to a certain position on click
showOnScrollUp		false	boolean	show the back to top button only when the user scrolls up.
showAt		1000	number	show the button at y position
speed		2000	number	scrolling speed
easing		"easeOutSine"	string	scroll timing function. Options: "easeOutSine", "easeInOutSine", "easeInOutQuint"
style			Object	style of the floating button.

How to test in playground

1. Clone repository
2. Run yarn build
3. Run yarn i-all
4. Run yarn dev

License

MIT