🇯🇵 JA / 🇺🇸 EN
Accent Color
GitHub
Tsugawa Magic Back to Top Logo Built for Designers.

The Most Beautiful "Back to Top" Button for WordPress.
Tsugawa Magic Back to Top

Maximum performance with absolutely zero heavy library overhead. Beautiful, fluid pixel-level acceleration and deceleration scrolling. Responsive floating UI designed to fit perfectly on every device. Crafted with care to refine your everyday digital touchpoint by stripping away all the clutter.

Download Latest on GitHub View Code on GitHub
Signature Story

Tsugawa Magic Back to Top LogoDeveloper's Obsession & Promise

When browsing a website, the "Back to Top" button is one of the most frequently used UI elements. Yet, many existing plugins rely on heavy jQuery libraries, offer unpolished layouts, or slow down your site by loading unnecessary assets.

"Because I use it myself every single day, I wanted to refine it to perfection."

Driven purely by this vision and craftsman-like obsession, this plugin was born. From the precise fade-in timing and the fluid easing of the smooth scroll (down to the pixel level) to a design that has zero impact on loading speeds, every single detail was polished without compromise.

“This is the ultimate B2T tool that actually runs on all my websites, undergoing continuous real-world testing every single day.”

While it is completely free and open-source, it holds a level of quality and pride that rivals premium software. I have created something I can truly recommend with confidence. It is my hope to bring this seamless experience to all creators and site owners.

Toru Tsugawa

Creator of Tsugawa.TV

Tsugawa.TV

Tsugawa Magic Back to Top LogoProduct Features

Features crafted with meticulous attention to detail. Every element is engineered for blazing-fast speed.

Multi-Device UI

Provides a floating behavior that adapts beautifully to any screen size, from desktop to mobile.

Scroll Progress Ring

Features a unique circular indicator that dynamically fills up as the user scrolls down the page.

Live Preview

Equipped with an in-admin live preview, allowing you to fine-tune colors, icon styles, and opacity in real-time.

Pixel-Perfect Adjustments

Fine-tune button sizes, opacity, and margins from the edges (bottom-right, bottom-left, etc.) independently for desktop and mobile.

Ultra-Lightweight Design

Built with pure native JS and CSS variables without jQuery or external libraries. Impact on site speed is practically zero.

CSS-Based Mobile Hiding

Uses CSS media queries to hide the button on mobile devices. Prevents conflicts with page caching and maintains speed.

Elegant SVG Arrow Icons

Choose from several carefully selected high-fidelity SVG arrow icons that scale cleanly without losing sharpness.

My Color Presets

Customize button colors to match your site's branding. Save up to three favorite configurations as "My Color" presets.

Pro Palette Presets

Comes with five pre-configured, professional color schemes to get you started immediately with a single click.

Display Timing & Scroll Speed

Control the exact scroll distance (px) required for the button to appear, and adjust the scroll duration directly in the settings.

Exclude Specific Pages

Easily exclude specific pages—like landing pages or homepages—where you don't want the button to display, using IDs or slugs.

Static Code Export

Export your customized design as standalone HTML/CSS/JS. Reuse the button seamlessly on static landing pages outside WordPress.

Tsugawa Magic Back to Top LogoInstallation

Get it up and running on your site in under a minute.

01
01

Upload Plugin

Upload the downloaded ZIP file via the "Add New Plugin" screen in WordPress, or copy the unzipped `tsugawa-magic-back-to-top` folder directly to your `/wp-content/plugins/` directory.

02
02

Activate Plugin

Navigate to "Plugins" in your WordPress dashboard, locate "Tsugawa Magic Back to Top" in the list, and click "Activate".

03
03

Start Customizing

Once activated, open the "Settings > Magic B2T" page in your admin panel to configure the colors, position, and scroll dynamics to match your brand.

Tsugawa Magic Back to Top LogoFrequently Asked Questions

Common questions regarding setup, usage, and compatibility.

Yes. Since mobile visibility is controlled via CSS media queries, it works reliably without being affected by page caching. If layout or color updates in the settings do not reflect on your frontend immediately, try clearing your WordPress caching plugin or server cache.

No, it will not. This plugin is written from scratch for maximum efficiency. It utilizes the browser's native `requestAnimationFrame` API for smooth scrolling animations and does not load any heavy external libraries like jQuery on the frontend.

No, it isn't. The ZIP package includes backend administration panels, translation files, and the plugin update checker (PUC). The actual script loaded on the public-facing frontend is minimal, keeping the impact on page speed close to zero.

Yes, you can update it with a single click from the WordPress plugins page, just like standard plugins. You can also enable "Enable auto-updates" to keep the plugin automatically updated to the latest version.

The source code is hosted on GitHub. Please submit bug reports or feature requests via the Issues or Pull Requests sections on the GitHub repository.

Yes, Tsugawa Magic Back to Top is open-source (GPL v2 or MIT license). You are completely free to use it on commercial websites or client projects at no cost.

Yes, the plugin is built secure-by-design. By keeping the code independent of vulnerable third-party libraries and avoiding user-data collection, it aligns with standard WordPress security best practices.

No, Tsugawa Magic Back to Top is released completely free of charge, and all future updates will remain free as well.