前言介紹
- 這款 WordPress 外掛「Tap Top」是 2025-10-10 上架。
- 目前有 10 個安裝啟用數。
- 上一次更新是 2025-10-19，距離現在已有 129 天。
- 外掛最低要求 WordPress 5.6 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.2 以上。
- 尚未有人給過這款外掛評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
gutenberg | back to top | scroll button | smooth scroll | floating button |
內容簡介
總結：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
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Tap Top」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
Joinchat 》🎉透過訪客喜愛的聊天應用程式與您的網站訪客聊天。在您的網站底部放置浮動按鈕，為您的客戶提供最好的支援。, , 這是全球安裝量超過 40 萬的最佳 WhatsApp W...。
Side Menu Lite – Sticky Floating Side Menu 》Side Menu Lite 是一個免費的外掛，可以在您的網站上創建方便的側邊欄。它允許您在頁面的左側或右側添加固定的滑出按鈕。插入任何鏈接，並在網站上創建獨特的...。
Floating Button – Easily Create Sticky, Fixed & Floating Buttons 》d get help with any issues you may encounter by visiting the Floating Button plugin support page: https://wordpress.org/support/plugin/floating-but...。
Button Generator – Easily Create Custom Buttons with Icons and Analytics 》Button Generator 是一個簡單而功能強大的 WordPress 外掛程式，可用於建立按鈕。使用這個按鈕產生器外掛，您可以輕鬆地建立標準和漂浮按鈕，並附上圖示，以...。
Floating Contact Button 》「Floating Contact Button」會在螢幕右下角顯示固定的聯絡按鈕。它會打開一個彈出式窗口，顯示您最喜歡的聯絡表單外掛程式。在此之前，您需要製作一個聯絡表...。
Floating Contact Button for MAX and Telegram 》總結：這款 Floating Contact Button for MAX and Telegram 的 WordPress 外掛可在你的網站上加入一個浮動按鈕，讓訪客可以透過 Telegram Messenger 或 MAX M...。
Chat Floating Button BY XD 》總結：透過這個 WordPress 外掛，您可以在網站上添加浮動的 WhatsApp 聊天按鈕，與訪客透過他們喜歡的聊天工具 WhatsApp 進行溝通，並在網站底部顯示聊天圖標...。
Yivic Easy Live Chat 》++ 說明 ++, 這個外掛能夠幫助我們快速建立快速聊天按鈕，提供多種聊天按鈕選項以更好地接觸客戶。, , 功能：, 在每個頁面上顯示快速聊天按鈕, , 新增或刪除...。
Buttons – Build Floating, Social Share & Print Buttons Easily 》```html, <ul>, <li>使用Buttons外掛程式，輕鬆製作華麗的標準、浮動和社交分享按鈕。完全控制它們的設計和功能，輕鬆展現創造力。</li>...。
Floating Button Call To Action 》摘要：「Floating Button Call To Action」外掛可以在你的 WordPress 網站新增一個浮動按鈕用於呼叫使用者進行特定操作，按鈕形狀及顏色可以自訂，並可以針對...。
Floating Button WP 》這個外掛在 WordPress 中建立一個浮動按鈕和側邊欄。, 當按下按鈕時，就會顯示側邊欄的內容。, 基本上，它是用來隱藏一個表單，當按下按鈕後就會顯示，但您可...。
ChatFloat – Floating Chat Button 》總結：這款輕量且易於使用的 WordPress 外掛可以在網站的每個頁面上添加一個浮動的 WhatsApp 按鈕，讓訪客能立即透過 WhatsApp 與您聯絡。非常適合希望與使用...。
COVID-19 Float Button 》這個外掛會創建一個浮動按鈕，連接到一個「閱讀更多」頁面（需要使用者自行創建），用於 COVID-19 相關資訊。您可以在 WordPress 後台中選擇不同的圖示，設置...。
Smart Chat Button 》```html, <!DOCTYPE html>, <html>, <head>, <title>Smart Chat Button WordPress 外掛介紹</title>, </head>, <bod...。
Poly Support 》總結：這個 WordPress 外掛可幫助管理員和網站/部落格開發人員管理和分佈支援圖示、貼紙、標誌和促銷物品，透過簡單的拖放功能將它們放置在頁面任何位置。, ,...。