Jump-Up Module v0.4.7

A simple React component that provides a "Jump to Top" button that appears after scrolling a certain distance. The button, when clicked, scrolls the page back to the top smoothly.

Features

• Smooth scroll to top: Click the button to smoothly scroll to the top of the page.
• Scroll-triggered visibility: The button only appears when the user scrolls down 100px.
• Customizable styles: Easily customizable with CSS modules for scoped styling.
• Lightweight: Minimal dependencies, just React.

Installing the package

npm install jump-up-module

Import the component

import { JumpUp } from 'jump-up-module'

3. Example :

import { JumpUp } from 'jump-up-module'

export default function Home() {
  return (
    <>
      <h1>Module Test</h1>
      <JumpUp />
      <p>...Add text more than `100vh`</p>
    </>
  )
}

4. CSS Customize styles :

/* CSS Code */
.jumpUpContainer {
  /* Main container styles */
  position: absolute;
  z-index: 1000000 !important; /* Adjust stacking order */
  animation: fade-in 1s ease-in-out; /* Add custom fade-in animation */
}

.jumpUpBox {
  /* Box container styles */
  position: fixed;
  right: 10px;
  bottom: 20px;
  color: white;
  background: rgba(30, 30, 30, 0.6);
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  display: none; /* Hidden by default */
}

.jumpUpBox.visible {
  display: block; /* Show when button is visible */
  animation: slide-top 0.5s ease-out both; /* Animation for smooth transition */
}

.jumpUpMaterialIcon {
  /* Material Icon customization */
  font-size: 35px;
  user-select: none; /* Prevent text selection */
}

/* Animations */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slide-top {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100px);
  }
}

Prerequisites

DevDependencies

Patch Notes

v0.4.7 - August 2025

• Bug Fixes:

  • Fixed custom className support for JumpUp component so developers can override styles more easily.

v0.4.6

v0.4.5

v0.4.4

v0.4.3

v0.4.2

v0.4.1

v0.4.0

v0.3.9

v0.3.8

v0.3.7

v0.3.6