Sign In Get Started

Help Visitors Get Back Fast
with a Back to Top Button

Add a smooth-scrolling floating button that appears when visitors scroll down. One click takes them back to the top — on any website, any device.

Build Your Button — Free
You
Add a back to top button to my site. Dark circle with a white arrow, bottom-right corner, smooth scroll to top.
MightyWidgets AI
Done! I've created a floating back-to-top button with a dark circular design and white arrow icon, positioned in the bottom-right corner. It appears after 300px of scroll with a fade-in animation and smooth-scrolls to the top on click.

What Is a Back to Top Button?

A back to top button is a small floating element that appears in the corner of the screen after a visitor scrolls down a page. Clicking it triggers a smooth animation that glides the page back to the very top. It is a standard user experience pattern found on virtually every content-heavy website — from blogs and documentation sites to e-commerce catalogs and news portals. The button stays out of the way when visitors are at the top of the page and only reveals itself once scrolling makes it useful. It provides a quick, one-click shortcut that saves visitors from repeatedly swiping or scrolling through long pages to return to the navigation, search bar, or header.

See It in Action

Scroll down inside the demo container, then click the button to scroll back to the top

Scroll down to see the button appear

This is a working back to top button. Build yours with MightyWidgets in under a minute.

Why Add a Back to Top Button to Your Website?

A small detail that makes a big difference in user experience

Instant Navigation on Long Pages

Blog posts, product listings, and landing pages often stretch well past the fold. A back to top button lets visitors jump to the header, navigation, or search bar in a single click instead of scrolling endlessly through content they have already read.

Improve Perceived Site Speed

When visitors can return to the top of the page instantly, your site feels faster and more responsive. This smooth scrolling interaction creates a polished user experience that keeps people engaged longer and reduces frustration on content-heavy pages.

Better Accessibility for Everyone

Not every visitor uses a keyboard shortcut to scroll to the top. A visible, clearly labeled button provides an accessible shortcut for users with motor impairments, touchscreen users, and anyone who prefers tapping over swiping through a long page.

Everything You Need in a Back to Top Button

Simple functionality, fully customizable presentation

Appears Only When Needed

The button stays hidden when visitors are at the top of the page and fades in after they scroll past a configurable threshold. This keeps your layout clean and uncluttered at the starting viewport, and provides the shortcut exactly when it becomes useful — no sooner, no later.

Back to top button appearing after scrolling past a configurable scroll threshold on a long page

Smooth Scroll Animation

Clicking the button triggers a silky smooth scroll animation that glides the page back to the top. It feels responsive and polished — far better than an abrupt jump. The scroll speed and easing curve are tuned for a natural feel, and you can ask the AI to adjust them.

Smooth scroll animation illustration showing the page gliding from bottom to top

Fully Customizable Shape and Style

Choose a circle, rounded square, or pill shape. Pick any color, icon, size, and shadow style. Want a progress ring around the button that fills as visitors scroll? Just ask. The AI builds whatever design you describe, matching your brand with zero design effort on your part.

Multiple back to top button style variations including circle, rounded square, and pill shapes with different colors

Embed Anywhere with One Line of Code

Once you publish your back to top button, you get a single embed snippet to paste into any website. It works on WordPress, Shopify, Squarespace, Wix, Webflow, and any platform that supports custom HTML. The button loads asynchronously, so it never slows down your page.

One-line embed code being copied from MightyWidgets dashboard for adding the back to top button to any website

Add a Back to Top Button in 3 Easy Steps

From idea to live button on your website in under a minute

1

Describe It

Tell our AI what your back to top button should look like — color, shape, icon, and position — or start from a template.

2

Refine It

Ask the AI for changes in plain English — adjust the design, scroll threshold, animation speed, or placement until it's perfect.

3

Embed It

Copy one line of code and paste it into your site. Your back to top button is instantly live on every page.

Back to Top Button Use Cases

See where scroll-to-top buttons make the biggest impact

Long-Form Blog Posts

Articles with 2,000+ words leave readers far from the navigation. A back to top button lets them jump to the menu, search bar, or header without endlessly scrolling up through content they have already finished.

E-Commerce Product Listings

Category pages with dozens of products can stretch for many screens. Give shoppers a quick way back to filters, sorting options, and the search bar so they can refine their results without frustration.

Documentation & Knowledge Bases

Technical docs and help centers are reference-heavy and deeply scrollable. A floating button helps users navigate back to the table of contents or main menu after reading a specific section.

Single-Page Websites

Landing pages and portfolio sites that pack everything into one long scroll benefit enormously from a back to top button — it gives visitors a clear way to revisit the header or hero section at any time.

The Easiest Way to Add a Back to Top Button to Any Website

Whether you need a scroll to top button for WordPress, a back to top widget for Shopify, or a floating scroll button for your custom-built site, MightyWidgets makes it effortless. Describe what you want in plain English and the AI builds a fully responsive back to top button that works on every platform and every device. No plugins to install, no JavaScript to write, no developer to hire. Just describe the style, pick your colors, and publish. Your scroll-to-top button will be live on your website in under a minute — complete with smooth scroll animation, configurable scroll threshold, and a design that matches your brand perfectly.

Works With Every Website Builder

Embed your back to top button on any platform that supports custom HTML

One button, every platform

MightyWidgets generates a single embed code that works everywhere. Whether your site runs on WordPress, Shopify, Squarespace, or plain HTML, your back to top button will look and work exactly the same. No platform-specific plugins needed.

  • WordPress
  • Shopify
  • Squarespace
  • Wix
  • Webflow
  • Weebly
  • Ghost
  • Custom HTML Sites

Frequently Asked Questions

Everything you need to know about back to top buttons

What is a back to top button?

A back to top button is a small floating element — usually a circle with an upward arrow — that appears in the corner of the screen after visitors scroll down a page. Clicking it smoothly scrolls the page back to the very top. It is a standard UX pattern found on blogs, e-commerce sites, documentation pages, and any site with long-scrolling content.

When does the button appear?

The button is hidden when the visitor is at the top of the page and appears after they scroll down past a configurable threshold — for example, 300 pixels or 25% of the page height. This keeps the screen clean when the button is not needed and reveals it precisely when it becomes useful.

Can I customize the button design?

Absolutely. You can change the shape, size, color, icon, border radius, shadow, and position. Tell the AI what you want — "a rounded square with my brand blue" or "a minimal dark circle with a thin arrow" — and it builds the button to match. Adjust anything with a follow-up instruction.

Does the scroll animation use smooth scrolling?

Yes. Clicking the button triggers a smooth scroll animation that glides the page back to the top rather than jumping abruptly. The speed and easing curve are configurable — the AI sets sensible defaults, and you can ask for faster or slower scrolling if needed.

Will the button overlap my other content?

The button floats in a fixed position (bottom-right by default) and sits on top of page content with a high z-index. It is small enough that it doesn't block important elements, and you can reposition it to any corner if the default placement conflicts with your layout.

How do I add a back to top button to my website?

Sign up for a free MightyWidgets account and describe the back to top button you want — including the style, color, and position. The AI builds it for you. Ask for any adjustments until it looks right, then publish. You get a single line of embed code to paste into your site.

Does it work on mobile devices?

Yes. The button is fully responsive and touch-friendly. On mobile, it is sized for easy tapping and positioned to avoid interfering with bottom navigation bars or other fixed elements. The smooth scroll animation works on all modern mobile browsers.

Is MightyWidgets free to use?

You can create and customize widgets for free with our Free plan. Credits are used when your published widget loads on a visitor's browser and when you use AI features. Upgrade to a paid plan for more credits, widgets, and features. Top-up credit packs are also available and never expire.

You Might Also Like

Other widgets that improve site navigation and usability

Table of Contents

Auto-generate a clickable table of contents for long articles

Tabs

Organize content into switchable tabbed panels

FAQ Accordion

Collapse and expand FAQ sections to save vertical space

Ready to Build Your Back to Top Button?

Create a smooth-scrolling floating button in under a minute. No coding required, no credit card needed.

Get Started Free