Tap Top

Description

Tap Top goes far beyond simple back-to-top plugins by solving real problems that modern WordPress sites face with scroll libraries and complex layouts.

🎉 What’s New in Version 1.3.0

✨ 6 Unique Button Shapes
* Circle (Classic round button)
* Square (Modern angular design)
* Rounded Square (Soft corners)
* Pill (Capsule/oblong shape)
* Pentagon (5-sided polygon)
* Hexagon (6-sided polygon)

🎬 6 Smooth Animation Styles
* Fade (Classic smooth fade)
* Slide (Slides up from bottom)
* Scale (Zoom in/out effect)
* Bounce (Playful bounce animation)
* Rotate (Spinning entrance)
* Flip (3D flip effect)

👆 Smart Hide on Scroll Down
* Automatically hides button when scrolling down
* Reappears instantly when scrolling up
* Reduces visual clutter and improves UX
* Smooth transitions with accessibility support

🚀 Core Features

Library-Aware Scroll Behavior
* Automatic Detection: Detects Lenis, Locomotive Scroll, and SmoothScrollbar automatically
* Native API Integration: Uses each library’s public API to avoid conflicts and broken behavior
* Multi-Container Support: Works with nested scroll containers and page builder layouts
* Graceful Fallback: Custom smooth scroll for sites without these libraries

Universal Anchor Link Fixes
* Cross-Library Normalization: Makes anchor links work consistently across all scroll libraries
* Smart Offset Detection: Automatically accounts for sticky headers and fixed elements
* In-Page TOC Support: Ensures table of contents and anchor navigation work perfectly
* Hash URL Handling: Proper deep-linking support with smooth scrolling

Adaptive Positioning & Obstruction Avoidance
* Smart Detection: Automatically detects cookie banners, chat widgets, and other fixed elements
* Dynamic Repositioning: Moves button to avoid overlapping with other interface elements
* Mobile Safe Areas: Full support for iPhone notches, Android punch-holes, and gesture areas
* ResizeObserver Integration: Responds to layout changes in real-time

Accessibility-First Design
* Motion Preferences: Respects prefers-reduced-motion setting automatically
* Screen Reader Support: Proper ARIA labels and semantic markup
* Keyboard Navigation: Full keyboard accessibility support
* High Contrast Mode: Enhanced visibility in high-contrast and forced-colors modes
* Focus Management: Proper focus handling and visual indicators

Advanced Gutenberg Integration
* Full Site Editor Support: Works perfectly with block themes and site editing
* Per-Template Overrides: Different settings for different templates and pages
* Live Preview: Real-time preview in the block editor
* Flexible Display Modes: Global, Block-Only, or Hybrid approaches

Performance & Modern Development
* Zero Dependencies: No jQuery or external libraries required
* Efficient Loading: Idle-until-visible and intelligent loading strategies
* GPU Acceleration: Hardware-accelerated animations where supported
* Minimal Footprint: Lightweight code with maximum functionality

📋 Supported Scroll Libraries

Tested and Verified:
* ✅ Lenis (v1.0+) – Automatic detection and native API integration
* ✅ Locomotive Scroll (v4.x and v5.x) – Full compatibility with both versions
* ✅ SmoothScrollbar (v8.x) – Native API usage for smooth integration
* ✅ Custom Scroll Containers – Detects nested and custom implementations
* ✅ Native Browser Scrolling – Enhanced smooth scrolling fallback

🎯 Display Modes

Global Mode
* Traditional site-wide button with centralized settings
* Show/hide rules based on page types
* Content exclusion system for specific pages
* Perfect for sites that want consistent behavior everywhere

Block-Only Mode
* Use Gutenberg blocks for complete per-page control
* Each block has independent settings (colors, position, behavior)
* No global button – only blocks you explicitly add
* Ideal for complex sites with varied requirements

Hybrid Mode
* Global settings provide the default behavior
* Blocks override global settings on pages where they exist
* Best of both worlds – consistency with flexibility
* Recommended for most professional sites

🔧 Key Features

Scroll Progress Ring
* Beautiful circular progress indicator around the button
* Shows exact scroll progress (0-100%)
* Fully customizable colors, width, and background
* Automatically disabled for users with motion sensitivity
* Smooth 60fps animations with performance optimization

Smart Positioning
* Automatic detection of cookie banners, chat widgets, sticky headers
* Dynamic repositioning to avoid interface conflicts
* Mobile-first design with safe-area insets
* Responsive behavior across all device sizes
* Smooth transitions when obstacles appear/disappear

Comprehensive Customization
* Position control (left/right with pixel-perfect offsets)
* Size adjustment (24px to 80px)
* Color customization (background, icon, progress ring)
* Animation timing and easing preferences
* Show/hide conditions and page-specific rules
* 6 unique button shapes
* 6 smooth animation styles
* Smart hide on scroll down behavior

📱 Mobile & Device Support

Mobile Optimization
* iPhone safe-area support (notches, Dynamic Island)
* Android safe-area support (punch-holes, gesture bars)
* Touch-optimized button sizing and positioning
* Responsive design that adapts to orientation changes

Cross-Browser Compatibility
* Modern browsers with ES6+ support
* Graceful degradation for older browsers
* Progressive enhancement approach
* Tested on iOS Safari, Chrome, Firefox, Edge

⚡ Performance Features

Loading Optimization
* Lazy initialization – only loads when needed
* Intelligent asset enqueueing based on page content
* Minimal DOM impact with efficient event handling
* CPU-friendly animations with proper throttling

Memory Management
* Automatic cleanup when elements are removed
* Efficient event listener management
* ResizeObserver with proper disposal
* No memory leaks or performance degradation

Advanced Documentation

Button Shape Examples

Circle (Classic):
– Perfect for traditional designs
– Universal recognition
– Clean and simple

Square (Modern):
– Sharp, angular aesthetic
– Contemporary design
– Stands out on page

Rounded Square:
– Friendly, approachable
– Balanced between sharp and soft
– Popular in modern UIs

Pill (Capsule):
– Elongated shape
– Modern app-like feel
– Great for minimal designs

Pentagon:
– Unique 5-sided polygon
– Geometric visual interest
– Distinctive appearance

Hexagon:
– 6-sided polygon
– Technical/modern aesthetic
– Popular in tech designs

Animation Style Guide

Fade (Recommended):
– Smooth, subtle appearance
– Universal compatibility
– Low motion impact

Slide:
– Slides up from bottom
– Clear directional cue
– Engaging entrance

Scale:
– Zoom in/out effect
– Draws attention
– Modern feel

Bounce:
– Playful, energetic
– Fun animation
– Good for casual sites

Rotate:
– Spinning entrance
– Eye-catching
– Unique effect

Flip:
– 3D perspective effect
– Most dramatic
– Modern browsers only

All animations automatically disabled for users with prefers-reduced-motion setting.

Hide on Scroll Down

How It Works:
1. Button appears when scrolling up
2. Button hides when scrolling down
3. Reduces visual clutter during reading
4. Smooth transitions with chosen animation
5. Improves overall UX

Best Practices:
– Works great with Slide or Fade animations
– Ideal for content-heavy sites
– Reduces distraction during reading
– Users can still access by scrolling up

Developer Hooks

Filters:
– taptop_global_config – Modify global configuration
– taptop_block_attributes – Customize block defaults
– taptop_should_load – Control when assets load
– taptop_excluded_pages – Programmatically exclude pages

Actions:
– taptop_before_button_render – Before button initialization
– taptop_after_assets_enqueue – After assets are loaded

Privacy Policy

Tap Top respects user privacy and GDPR compliance:

No Data Collection:
– Plugin does not collect any personal data
– No external API calls or data transmission
– No user tracking or analytics
– No cookies or local storage usage

Local Functionality:
– All settings stored in WordPress options table
– JavaScript runs entirely client-side
– No external dependencies or CDN usage
– Respects user’s motion and accessibility preferences

Credits

Special thanks to:
– WordPress community for feedback and testing
– Accessibility consultants for WCAG compliance guidance
– Modern scroll library maintainers for API documentation
– Beta testers who helped refine the user experience
– Design inspiration from modern web applications