philhoyt

The Back to Top Block adds a customizable button that allows users to smoothly scroll back to the top of your page. Perfect for long-form content and improved user experience.
Key Features:
<ul>
<li>Customizable Button Text – Change the text to match your site’s language or style</li>
<li>Optional Icon Display – Show or hide the up arrow icon</li>
<li>Custom Icon Support – Upload your own icon to match your site’s design</li>
<li>Smooth Scrolling – Elegant animation when scrolling to top</li>
<li>Reduced Motion Support – Respects user’s motion preferences</li>
</ul>
How it Works
Simply add the block to your page or post where you want the back-to-top button to appear. The button will automatically handle scrolling to the top of the page when clicked, with smooth animation for users who haven’t enabled reduced motion preferences.

Back To Top Block

A customizable "Back to Top" button block to help users quickly navigate to the top of your pages.

Anisur Rahman

AR Back To Top adds a beautiful, customizable scroll to top button to your WordPress site — no coding required. Install it in seconds from the WordPress plugin directory and configure everything through a modern settings panel with live preview.
Perfect for blogs, business sites, portfolios, and WooCommerce stores. The button appears when visitors scroll down and smoothly returns them to the top with a single click. Includes a scroll progress indicator, device-specific positioning, page-level visibility controls, and 19 built-in icons — all powered by lightweight vanilla JavaScript with zero jQuery dependency.
<h3>AR Back To Top Features</h3>
<ul>
<li>Displays a Back to Top button when the user scrolls down the page.</li>
<li>Smooth scroll animation with multiple easing effects (linear, ease-in, ease-out, ease-in-out).</li>
<li>Fully customizable — no coding required.</li>
<li>Modern tabbed settings UI with live preview panel.</li>
<li>Choose from 19 Font Awesome 6 icons via an interactive icon picker.</li>
<li>Custom icon upload — upload PNG, JPG, GIF, or SVG from your media library.</li>
<li>Button shape presets — circle, square, rounded square, or custom border-radius.</li>
<li>Supports custom button size, icon size, and padding.</li>
<li>Customize background, text, border colors with separate hover states.</li>
<li>Set the button position — left, right, or center bottom.</li>
<li>Separate mobile positioning — independent bottom/side offsets for mobile.</li>
<li>Define scroll offset — control when the button appears.</li>
<li>Adjustable scroll duration for a smoother UX.</li>
<li>Auto-hide button after configurable seconds of inactivity.</li>
<li>Scroll progress indicator — circular SVG progress ring around the button.</li>
<li>Reading progress bar — horizontal bar at the top of the page showing how far the visitor has scrolled, with configurable color and height.</li>
<li>Scroll to bottom button — optional second button that scrolls to the bottom of the page, with the same easing and styling.</li>
<li>Button entrance animations — fade-in, bounce, or scale animation when the button appears on scroll.</li>
<li>Smart show/hide — hide the button when scrolling up, show when scrolling down for a cleaner UX.</li>
<li>Click analytics — track how many times the button is clicked, viewable in the admin settings.</li>
<li>Keyboard shortcut — press Home key to scroll to top (when enabled).</li>
<li>WooCommerce integration — hide the button on shop, product, cart, and checkout pages.</li>
<li>Touch gesture support — swipe up on mobile devices to scroll to top.</li>
<li>Page/post display filter — show or hide on specific pages/posts with Select2 search.</li>
<li>Device visibility — hide on desktop, tablet, or mobile with custom breakpoints.</li>
<li>Show in WP admin area — enable the button in the WordPress dashboard.</li>
<li>Shortcode support — use <code>[ar_back_to_top]</code> to place the button anywhere in your content.</li>
<li>Enable or disable the button with a single click.</li>
<li>Font Awesome version control — choose FA 6, FA 5, or skip loading if already enqueued.</li>
<li>Supports custom CSS for advanced styling with CSS hook hints.</li>
<li>Tooltip text and z-index control.</li>
<li>Reset to defaults with one click.</li>
<li>Option to load JavaScript asynchronously for performance.</li>
<li>Zero jQuery on frontend — vanilla JavaScript, requestAnimationFrame throttled.</li>
<li>Conditional asset loading — CSS/JS not loaded on pages where button is hidden.</li>
<li>SVG upload support for custom icons (admin-only for security).</li>
<li>Accessible — semantic <code><button></code> element, ARIA labels, screen reader text, keyboard navigation.</li>
<li>PHP 8.2+ compatible — no deprecated dynamic properties.</li>
<li>Compatible with all modern WordPress themes.</li>
<li>Cross-browser compatible (Chrome, Firefox, Safari, Edge, etc.).</li>
</ul>

AR Back To Top

Add a lightweight, fully customizable scroll to top button with smooth animation, scroll progress indicator, and mobile-friendly positioning.

Back To Top Block vs AR Back To Top