scroll-totop-button v1.0.5

Scroll-ToTop-Button

A customizable and lightweight React component to add a "Scroll to Top" button in your React applications. Enhance user experience with a smooth and modern scrolling experience.

Features

• Smooth scrolling to the top of the page.
• Button appears only after the user scrolls past a configurable threshold.
• Fully customizable styles.
• Lightweight and easy to integrate.
• Built with TypeScript for better type safety.

Installation

Install Scroll-ToTop-Button with npm

  npm i scroll-totop-button

Usage/Examples

import React from "react";
import { scrollToTop } from "scroll-totop-button";

const App = () => {
  return (
    <div>
      <h1>My React App</h1>
      <p>Scroll down to see the button!</p>

      <ScrollToTop
        threshold={300}
        smooth={true}
        className="scroll-to-top"
        style={{
          backgroundColor: "white",
          color: "black",
          fontSize: "1.1rem",
        }}
      />
    </div>
  );
};

export default App;

Props

How It Works

The Scroll-ToTop-Button component tracks the user's scroll position and only becomes visible after the user has scrolled down past a certain threshold (default: 300px). Once clicked, it smoothly scrolls the page back to the top, improving usability for long-scrolling pages.

Advanced Usage

Using Custom Styles

<ScrollToTop
  style={{
    backgroundColor: "#4CAF50",
    color: "white",
    padding: "1rem",
    borderRadius: "50%",
    fontSize: "1.25rem",
  }}
/>

Feedback & Contributions

Have suggestions or improvements? Feel free to open an issue or submit a pull request on the GitHub

License

ISC

Build by

Malhar Chauhan

GitHub