☰

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.

18.11.2024 itibariyledir. En son verisyonu görün.

Nasıl kurarım

Bu betiği kurabilmeniz için Tampermonkey, Greasemonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

You will need to install an extension such as Tampermonkey to install this script.

Bu betiği kurabilmeniz için Tampermonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Userscripts gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği indirebilmeniz için ayrıca Tampermonkey gibi bir eklenti kurmanız gerekmektedir.

Bu komut dosyasını yüklemek için bir kullanıcı komut dosyası yöneticisi uzantısı yüklemeniz gerekecek.

(Zaten bir kullanıcı komut dosyası yöneticim var, kurmama izin verin!)

Nasıl kurarım

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(Zateb bir user-style yöneticim var, yükleyeyim!)

Yazar
DXRK1E
Değerlendirmeler
0 0 0
Versiyon
2.1.0
Oluşturulma
24.07.2024
Güncellenme
18.11.2024
Boyut
7,7 KB
Lisans
MIT
Geçerli
Tüm siteler

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