Tap Top for WordPress Plugin Directory

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