How to Add a Back to Top Button

The simplest version needs no JavaScript at all: a link to #top, fixed to the bottom corner with CSS, plus scroll-behavior: smooth on the html element. Add a few lines of script only if you want it hidden until the visitor has scrolled down a screen or two.

Updated October 28, 2026

Long pages such as blog posts, FAQs and product listings benefit from a quick way home. On short pages the button is noise. A good one is small, sits out of the way of chat widgets and cookie banners, and works with a keyboard.

Add a back to top button on We.Inc, WordPress, Wix, Squarespace or plain HTML

We.Inc

Ask the AI chat for a small back to top button that appears after scrolling, naming the corner you want.
Mention any chat add-on you use so the button sits clear of it.
Scroll a long page in preview to see it appear and work.
Publish.

This is a code change made by the AI, not an add-on, and uses credits on a paid plan.

WordPress

Check your theme's customiser first; many themes include a scroll-to-top option.
If not, add the snippet below with a code snippets plugin or your child theme's footer.
Clear any caching plugin and test on a long post.

Plugins and theme file edits on WordPress.com require a paid plan with plugins enabled.

Wix

In the Wix Editor, click Add Elements > Decorative > Arrows and drop an arrow near the bottom right.
Click the Link icon, choose Top/Bottom of Page and select Top.
Right-click the arrow, choose Pin to Screen, and turn on Show on All Pages.
Add a separate version in the mobile editor, as it does not carry over.

In the Studio Editor, use Add Elements > Buttons and pin it from the Inspector's Position settings.

Squarespace

Squarespace has no built-in back to top button in its help pages.
Add the snippet below through Code Injection in the Footer field.
Save and test on a long page of the live site.

Code Injection is only on the Core, Plus and Advanced plans. On other plans, add a 'Back to top' text link in the footer instead.

Plain HTML

Add id="top" to the body or header.
Paste the link and styles below before </body>.
Add the small script if you want it hidden until scrolling.

Back to top in HTML and CSS

Link that appears after one screen

Without the script the link is simply invisible, so either keep the script or delete the opacity rules.

<a href="#top" class="to-top" aria-label="Back to top">↑</a>
<style>
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  .to-top { position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: 50%; background: #111; color: #fff; text-decoration: none; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .to-top.show { opacity: 1; pointer-events: auto; }
</style>
<script>
  const t = document.querySelector(".to-top");
  addEventListener("scroll", () => t.classList.toggle("show", scrollY > innerHeight), { passive: true });
</script>

Sources

Every back to top source here was checked on October 28, 2026.

Wix Editor steps for a back to top button: https://support.wix.com/en/article/wix-editor-creating-a-back-to-top-button-for-your-site
Wix Studio Editor version of the same button: https://support.wix.com/en/article/studio-editor-creating-a-back-to-top-button
Squarespace code injection, footer field and plans: https://support.squarespace.com/hc/en-us/articles/205815908-Using-code-injection

Link or button?

A link to #top works without JavaScript and moves keyboard focus to the top as well, which helps screen reader users. A button with a scroll script looks the same but leaves focus at the bottom unless you move it yourself.

For in-page jumps to other sections, the same technique applies; our scroll-to-element guide covers offsets for sticky headers.

How it works

Give the top of the page a target, either id="top" on the body or the header.
Add a link pointing to #top with a clear label.
Fix it to the bottom right corner with CSS.
Optionally show it only after the visitor scrolls past one screen.
Respect reduced-motion settings when scrolling smoothly.

Tips

Use a real link or button with an aria-label such as 'Back to top', not an icon on a plain div.
Keep at least 44 by 44 pixels of tap area so it is easy to hit on phones.
Live chat bubbles usually sit bottom right too; move the button left or above it so they do not overlap.
Wrap smooth scrolling in a prefers-reduced-motion: no-preference media query so people who turn off animation get an instant jump.

Frequently asked questions

How do I make a back to top button in HTML?

Add <a href="#top" class="to-top">Back to top</a> near the end of the body, give the page an element with id="top", and position the link with position: fixed; bottom: 20px; right: 20px.

Why does my back to top button jump instead of scroll smoothly?

Smooth scrolling is off by default. Add html { scroll-behavior: smooth; } to your CSS, or call window.scrollTo({ top: 0, behavior: 'smooth' }) from a click handler.

Does Wix have a back to top button?

Not as a single setting. Wix's help shows how to make one: add an arrow or button, link it to the Top of the page, and pin it to the screen.

Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.