react-scroll-to-top
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.5 • Public • Published

    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

    NPM

    Live demo

    A live demo can be found here

    Installation

    Run npm i react-scroll-to-top

    Usage

    Import and then include <ScrollToTop /> anywhere in your render/return function:

    import ScrollToTop from "react-scroll-to-top";
     
    function CoolPage() {
      return (
        <div>
          <ScrollToTop smooth />
          <h1>Hello, world!</h1>
        </div>
      );
    }

    Props

    Prop Type Description Default
    smooth boolean Whether to use smooth scrolling* false
    top number Height after page scroll to be visible 20
    component any A custom component. See the example
    color string The arrow (SVG fill) color "black"
    svgPath string The SVG path d attribute An arrow path
    viewBox string The SVG viewBox attribute "0 0 256 256"
    style Object Object to add/override styling
    className string Classname to completely override styling

    Smooth scrolling uses a newer window.scrollTo implementation.
    Check out its support in browsers at MDN web docs.

    Examples

    With custom SVG component

    Types

    Written in TypeScript, no need for @types installation

    Install

    npm i react-scroll-to-top

    DownloadsWeekly Downloads

    1,548

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    14.6 kB

    Total Files

    6

    Last publish

    Collaborators

    • hermannygaard