Home โ€บPlugins โ€บtap top
Tap Top logo

Tap Top

by Tap Chat Team on WordPress.org

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

(0)
Admin Settings v1.3.0 - New button shapes and animation options

Admin Settings v1.3.0 - New button shapes and animation options

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

Active installations0+
Weekly downloads
48+26.32%
Version1.3.0
Last updated10/19/2025
WordPress version5.6
Tested up to6.8.3
PHP version7.2
Tags
back to topfloating buttongutenbergscroll buttonsmooth scroll