Scroll to Top Button

Adds a customizable scroll-to-top button near the page bottom.

Από την 29/01/2025. Δείτε την τελευταία έκδοση.

Κάντε μια ερώτηση, δημοσιεύστε μια ανασκόπηση, ή αναφέρετε τον κώδικα.

Δημιουργός: DXRK1E
Βαθμολογίες: 0 0 0
Έκδοση: 2.4.0
Δημιουργήθηκε την: 24/07/2024
Ενημερώθηκε την: 29/01/2025
Μέγεθος: 8 KB
Άδεια: MIT
Εφαρμόζεται σε: Όλοι οι ιστοχώροι

Scroll to Top Button - Documentation

Overview

This script adds a customizable "scroll to top" button to web pages, making it easy for users to quickly navigate back to the top of long content. It's designed to be user-friendly, performance-focused, and highly configurable.

Key Features

Smooth Scrolling: Uses advanced easing functions for natural, visually appealing transitions when scrolling to the top.
Intelligent Visibility: The button appears only after scrolling a configurable distance, and fades smoothly in and out.
Dynamic Adaptation: Reacts to changes in page content and adjusts button visibility and behavior accordingly.
Performance Optimized: Uses debouncing, passive event listeners, and efficient DOM manipulation to avoid impacting page performance.
Customizable Appearance: Allows extensive customization of button size, colors, placement, and more.
Configuration Flexibility: Offers detailed settings for scroll behavior and visibility thresholds.

How It Works

Button Creation: The script adds a floating button at the bottom of the webpage with an up arrow icon.
Visibility Control: The button is hidden until the user scrolls past a certain point on the page. It fades into view for a smooth transition.
Smooth Scrolling: When clicked, the button scrolls the user back to the top of the page with a smooth animation.
Dynamic Content Handling: Monitors the page for changes to ensure the button visibility is correctly managed.

Configuration Options

The script uses APP_CONFIG to control its behavior. Here's a detailed breakdown:

Button Appearance

button: {
    size: '45px',           // Size of the button
    fontSize: '18px',       // Size of the icon
    backgroundColor: '#3a3a3a', // Background color
    hoverColor: '#555',      // Background color on hover
    textColor: '#f5f5f5',    // Text/icon color
    borderRadius: '55%',    // Button corner radius
    position: {            // Button's position
        bottom: '25px',     // Distance from bottom
        right: '25px'      // Distance from right
    },
    shadow: '0 3px 10px rgba(0,0,0,0.45)', // CSS box shadow
    transitionSpeed: 350,    // Fade in/out speed in ms
    zIndex: 2147483647,     // Button's z-index (ensures it's on top)
    svg: {                 // SVG icon settings
       width: '20px',
       height: '20px',
       viewBox: '0 0 16 16'
    }
}