☰

Scroll to Top Button

Adds a scroll to top button at the bottom right of the page when scrolled to the bottom, and hides it at the top.

Maker
DXRK1E
Dagelijks aantal installaties
1
Totaal aantal installaties
37
Beoordelingen
1 0 0
Versie
2.1.1
Gemaakt op
24-07-2024
Bijgewerkt op
23-11-2024
Licentie
MIT
Wordt toegepast op
Alle websites

Scroll to Top Button - Documentation

Technical Overview

Core Features

  1. Dynamic Content Awareness

    • Utilizes MutationObserver to detect DOM changes
    • Automatically adjusts to dynamically loaded content
    • Maintains button visibility based on real-time page height

  2. Advanced Smooth Scrolling

    • Multiple easing functions for different scrolling experiences:
      • easeInOutCubic: Balanced acceleration/deceleration
      • easeOutQuad: Natural deceleration
      • easeInOutExpo: Dramatic easing for long scrolls
    • Distance-based duration adjustment
    • Frame-rate optimized animations

  3. Intelligent Visibility Control

    • Shows button after configurable scroll threshold
    • Considers viewport height and total page length
    • Smooth fade transitions for showing/hiding
    • Prevents visibility during short page loads

Performance Optimizations

  1. Event Handling

    • Debounced scroll event processing
    • Passive event listeners for touch events
    • Optimized animation frames
    • Efficient DOM queries and caching

  2. Memory Management

    • Single button instance enforcement
    • Proper event listener cleanup
    • Efficient style calculations
    • Minimal DOM operations

Configuration Guide

Button Appearance

{
    buttonSize: '40px',
    fontSize: '16px',
    backgroundColor: '#333',
    hoverColor: '#444',
    textColor: '#FFF',
    borderRadius: '50%',
    bottom: '20px',
    right: '20px'
}

Scroll Settings

{
    scroll: {
        duration: 800,        // Base duration in milliseconds
        easing: 'easeInOutCubic',
        fps: 60,
        breakpoints: {
            short: 500,       // Quick scroll for short distances
            medium: 1500,     // Standard scroll for medium distances
            long: 3000        // Slower scroll for long distances
        }
    }
}

Visibility Thresholds

{
    showThreshold: 300,      // Pixels scrolled before showing
    minimumPageHeight: 1000, // Minimum page height to enable button
    fadeSpeed: 300,          // Transition duration
    zIndex: 2147483647       // Maximum z-index value
}

Implementation Details

Animation System

The script uses a sophisticated animation system that:

  1. Calculates optimal scroll duration based on distance
  2. Applies appropriate easing for smooth motion
  3. Maintains consistent frame rate
  4. Adjusts to system performance

Compatibility Features

  • Works with modern and legacy browsers
  • Handles different scrolling containers
  • Supports dynamic page modifications
  • Adapts to various page layouts

Error Handling

  • Prevents multiple button instances
  • Graceful degradation in unsupported browsers
  • Handles scroll interruption
  • Manages edge cases in page structure

Best Practices

Integration

  1. Add to page early in load cycle
  2. Avoid conflicts with existing scroll handlers
  3. Consider z-index hierarchy
  4. Test with various page lengths

Customization

  1. Adjust thresholds for specific use cases
  2. Modify easing for desired feel
  3. Customize appearance for branding
  4. Configure breakpoints for content type

Performance

  1. Monitor scroll performance
  2. Adjust debounce timing if needed
  3. Consider page weight impact
  4. Optimize animation settings

Browser Support

  • Chrome 61+
  • Firefox 55+
  • Safari 11+
  • Edge 16+
  • Opera 48+

Known Limitations

  1. Extremely long pages may require adjusted settings
  2. Complex dynamic content may need custom threshold adjustments
  3. Some legacy browsers may fall back to basic scrolling
  4. Heavy JavaScript execution may affect animation smoothness