內容簡介
總結：Tap Top 透過解決現代 WordPress 網站在捲動庫和複雜版面上所面臨的真實問題，遠超乎簡單的回到頂部外掛。
問題與答案：
1. Tap Top 有什麼獨特之處？
- Tap Top 提供了一個 Library-Aware Scroll Behavior，有以下特點：
- 自動檢測：自動偵測 Lenis、Locomotive Scroll 和 SmoothScrollbar。
- 本地 API 整合：使用每個庫的公共 API 以避免衝突和破壞行為。
- 多容器支援：適用於巢狀滾動容器和頁面構建器版面。
- 保守回退：針對沒有這些庫的網站提供自定義滑動。
2. Tap Top 如何修復通用的錨點鏈接問題？
- Tap Top 提供了 Universal Anchor Link Fixes，包括：
- 跨庫歸一化：讓錨點鏈接在所有捲動庫中一致工作。
- 智能偏移偵測：自動考慮粘性標題和固定元素。
- 頁內 TOC 支援：確保目錄和錨點導覽完美工作。
- Hash URL 處理：提供平滑滾動的適當深度鏈接支援。
外掛標籤
開發者團隊
原文外掛簡介
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
