react-scroll-to-top

A lightweight and customizable button component that scrolls to the top of a page when pressed
The button is only visible once a certain height has been reached on the page

Live demo

A live demo can be found here

Installation

With npm:

npm i react-scroll-to-top

or with Yarn:

yarn add react-scroll-to-top

Usage

Import and then add <ScrollToTop /> at the bottom of your return function (for a11y reasons):

import ScrollToTop from "react-scroll-to-top";

function CoolPage() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <div style={{ marginTop: "150vh" }} />
      <ScrollToTop smooth />
    </div>
  );
}

Props

Prop	Type	Description	Default
smooth	boolean	Whether to use smooth scrolling*	false
top	number	Height after page scroll to be visible	20
color	string	The SVG icon fill color	"black"
svgPath	string	The SVG icon path d attribute	An arrow path
width	string	The SVG icon width	"28"
height	string	The SVG icon height	"28"
viewBox	string	The SVG icon viewBox attribute	"0 0 256 256"
component	any	Component to override SVG icon. See examples
style	Object	Object to add/override styling
className	string	Classname to add/override styling (note, `!important` for overrides might be needed)