MakeITeasy Back To Top vs Tap Top

Very customizable and lightweight back to top 🔝 solution. Fully compatible with Full Site Editing themes and with classic themes if block editor is enabled. How this differs from other similar plugins? This is a block, inside which you can insert any other block. This makes it utmost customizable. By default, a button block with inline image is inserted, but you can remove it and insert any other block you wish or customize default button or insert your own image. As button is a normal WordPress block, you can customize it like you would normally do, pick background color or foreground color from sidebar, choose border radius for edges, or anything else which is customizable in block editor. Features (block editor sidebar) In the block sidebar, it is possible to choose if the block will appear both on desktop and mobile variant of page and breakpoint between the two. Choose page scroll mode when clicked on button: smooth or instant. Opacity of the block. Duration of slow appearance (“fade in”). Position of the block from bottom right corner of the browser window, in css unit by choice. Go to bottom functionality. DEMO Test in wordpress playground Choose “Live preview” button in top left area of screen. To get this working, a little effort is needed. These are the steps: Enter the admin area Open site editor (Edit site in admin toolbar) On the left sidebar, in AREAS, find Footer Insert “Back to top” block in the footer group block (outer group block, as there are two), as the last element of group. If you insert it outside, it may appear very wide. If you inserted it in the wrong place, correct it by moving the block to position. Set block alignment to right if you want it at the right side. Be carefull to set “Back to top”‘s block alignment, not alignment of the inner button. You can also activate “go to bottom” functionality in the block settings sidebar to try this. Save and navigate to front page. It should work. Or, alternatively, try demo of my popup block, where everything is already set up and also back to top button is showcased: MakeITeasy popup Go to bottom Introduced go to bottom functionality – can be turned on in block sidebar (off by default). When user scrolls down button flips down ⬇ and leads to bottom of page, when scrolled up it flips up ⬆ and leads to top of page. Usage General Plugin provides a block called “Back to top”, which serves the commonly known purpose to take user to top of the page. By default, button appears only when user scrolls some amount down. Block themes The best way to use plugin is using full site editing theme. There you can add it to footer (alternatively to header) and block will be displayed on each page with this footer. If you add it to page, it will be displayed for this page only. Classic themes As mentioned above, adding this block to page will show it only on this page. To show it on many/all pages, you have to add it to footer (or header). You can do so by creating block on one of the pages and copy its code (copy option from block menu). Then, add echo do_blocks($content); line in your footer (header) php template, where you replace $content with copied block content string. Content must be between single quotes, as it is string, according to rules of PHP. Or even better, use nowdoc syntax. Example for theme GeneratePress: First create child theme, so your code is not overwritten by theme updates. Then in footer.php, after line 13 of original footer.php of theme insert following code: echo do_blocks( block ); Important note: If you install block through block editor, and after creating block, you copy block code to footer and delete original block in page, plugin will be automatically uninstalled. This is handled by WordPress. Therefore, if you are using classic theme and you will use block code only in PHP, either install plugin in a classic way through plugins page or keep one copy of block active somewhere (e.g dummy draft page), to prevent automatic uninstall. Developers Github repository https://github.com/Lovor01/makeiteasy-back-to-top

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