Jump-up-module NPM

Jump-Up Module v0.4.5

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.5 - March 2025

New Features:
- Added smooth scrolling effect when the "Jump to Top" button is clicked.
- Introduced scroll-triggered visibility, making the button appear only after scrolling 100px down the page.
Improvements:
- Improved button appearance and behavior with enhanced CSS animations.
- Adjusted the position of the button for better UI alignment.
Customization:
- Customizable CSS module styles for the button and container, allowing easy styling.
- Included animations for smooth transitions.
Bug Fixes:
- Fixed minor visual glitches on different screen sizes.
- Corrected z-index issues to ensure the button appears correctly on all pages.