Numbers Probably Matter

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

    3.0.0 • 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

    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)

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

    Examples

    With custom SVG path
    With custom SVG component
    With custom DOM element

    Types

    Written in TypeScript, no need for @types installation

    Install

    npm i react-scroll-to-top

    DownloadsWeekly Downloads

    6,103

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    16.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • hermannygaard