scroll-to-top

A lightweight, customizable scroll-to-top button.

Installation

npm install @kikytokamuro/scroll-to-top

Usage

import { ScrollToTop } from "@kikytokamuro/scroll-to-top";

// Default settings
const btn = new ScrollToTop();

Options

| Option | Type | Default | Description | | ---------------------- | ---------------- | ------------------------------------------ | -------------------------------------------- | | buttonContent | string | <span style="font-size: 20px;">⬆</span> | Button HTML content | | size | number | 60 | Button size in pixels | | right | number \| null | 20 | Distance from right edge | | top | number \| null | 80 | Distance from top edge | | backgroundColor | string | #109CF1 | Button background | | hoverBackgroundColor | string | #0056b3 | Background on hover | | iconColor | string | #ffffff | Icon color | | borderRadius | string | 50% | CSS border-radius | | shadow | string | 0 4px 12px rgba(0,0,0,0.15) | CSS box-shadow | | zIndex | number | 50 | z-index | | transitionDuration | number | 300 | Fade animation duration (ms) | | scrollThreshold | number | 100 | Show button after scrolling this many pixels | | smoothScroll | boolean | true | Use smooth scroll behavior |

Example with custom options

import { ScrollToTop } from "@kikytokamuro/scroll-to-top";

const btn = new ScrollToTop({
  size: 50,
  right: 30,
  backgroundColor: "#ff5722",
  hoverBackgroundColor: "#e64a19",
  scrollThreshold: 200,
  transitionDuration: 400,
});

// Force recheck after dynamic content loads
btn.refresh();

// Clean up when component unmounts
btn.destroy();

API

| Method | Description | | --------------- | -------------------------------------------- | | scrollToTop() | Programmatically scroll to top | | refresh() | Recheck scroll state (after content changes) | | destroy() | Remove button and event listeners |

License

MIT