Tap Top

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