Advanced back-to-top button with 6 unique shapes, smooth animations, and smart scroll library detection for WordPress.

Tap Chat Team

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.
<h4>🎉 What’s New in Version 1.3.0</h4>
✨ 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
<h4>🚀 Core Features</h4>
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 <code>prefers-reduced-motion</code> 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
<h4>📋 Supported Scroll Libraries</h4>
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
<h4>🎯 Display Modes</h4>
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
<h4>🔧 Key Features</h4>
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
<h4>📱 Mobile & Device Support</h4>
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
<h4>⚡ Performance Features</h4>
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
<h3>Advanced Documentation</h3>
<h4>Button Shape Examples</h4>
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
<h4>Animation Style Guide</h4>
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 <code>prefers-reduced-motion</code> setting.
<h4>Hide on Scroll Down</h4>
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
<h4>Developer Hooks</h4>
Filters: 
– <code>taptop_global_config</code> – Modify global configuration 
– <code>taptop_block_attributes</code> – Customize block defaults 
– <code>taptop_should_load</code> – Control when assets load 
– <code>taptop_excluded_pages</code> – Programmatically exclude pages
Actions: 
– <code>taptop_before_button_render</code> – Before button initialization 
– <code>taptop_after_assets_enqueue</code> – After assets are loaded
<h3>Privacy Policy</h3>
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
<h3>Credits</h3>
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

Alternatives to Tap Top

Top alternatives