How to Add a Back to Top Button to Your Website

Why You Need a Back to Top Button on Your Website

Long pages are everywhere. Whether you run a blog, an ecommerce store, or a portfolio site, visitors will eventually get tired of scrolling. A back to top button gives them a one-click shortcut to return to the top of the page, improving navigation and overall user experience.

According to the Nielsen Norman Group, you should use a back to top button for any page longer than 4 screen heights. If your content regularly exceeds that threshold, this small UI element can make a big difference in how users interact with your site.

In this tutorial, we will walk through four practical methods to add a back to top button, from pure HTML and CSS to JavaScript-powered solutions and WordPress plugins. Pick the approach that fits your skill level and platform.

Method 1: Back to Top Button Using Only HTML and CSS (No JavaScript)

This is the simplest approach. It uses an anchor link at the top of the page and a fixed button that links to it. No JavaScript required.

Step 1: Add an Anchor at the Top of Your Page

Place this line right after the opening <body> tag:

<a id="top"></a>

Step 2: Add the Button HTML

Place this just before the closing </body> tag:

<a href="#top" class="back-to-top" title="Back to Top">&#8679;</a>

Step 3: Style the Button with CSS

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  text-align: center;
  line-height: 50px;
  font-size: 24px;
  text-decoration: none;
  z-index: 999;
  transition: opacity 0.3s;
}
.back-to-top:hover {
  background-color: #555;
}

Pros: Zero dependencies, works everywhere, lightweight.

Cons: The button is always visible (no show/hide on scroll behavior).

Method 2: Back to Top Button with HTML, CSS, and JavaScript

This is the most popular method and the one recommended by W3Schools. The button only appears after the user scrolls down a certain distance, and it smoothly scrolls back to the top when clicked.

Step 1: Add the Button HTML

<button onclick="scrollToTop()" id="backToTopBtn" title="Go to top">&#8679; Top</button>

Step 2: Add the CSS

#backToTopBtn {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  border: none;
  outline: none;
  background-color: #0073e6;
  color: #ffffff;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: opacity 0.3s, background-color 0.3s;
}
#backToTopBtn:hover {
  background-color: #005bb5;
}

Step 3: Add the JavaScript

var backToTopBtn = document.getElementById("backToTopBtn");

window.onscroll = function () {
  if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
    backToTopBtn.style.display = "block";
  } else {
    backToTopBtn.style.display = "none";
  }
};

function scrollToTop() {
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

The value 400 controls how far the user must scroll before the button appears. Adjust it to suit your layout.

How It Works

  1. The button is hidden by default (display: none).
  2. When the user scrolls past 400 pixels, JavaScript reveals the button.
  3. Clicking the button triggers window.scrollTo with smooth behavior.
  4. Once the user is near the top, the button hides again.

Method 3: Back to Top Button in WordPress (Plugin Options)

If you use WordPress and prefer not to touch code, several plugins handle this for you. Here are the best options available in 2026:

Plugin Key Features Price
WPFront Scroll Top Custom icon/image, animation options, responsive Free
To Top Lightweight, color/size controls, smooth scroll Free
Jesuspended Back to Top Minimal footprint, simple setup Free
Jesuspended Premium / Starter Templates Pro Built-in scroll to top in theme settings Included with theme

How to Install a Back to Top Plugin in WordPress

  1. Go to Plugins > Add New in your WordPress dashboard.
  2. Search for the plugin name (e.g., “WPFront Scroll Top”).
  3. Click Install Now, then Activate.
  4. Navigate to the plugin settings page (usually found under Settings).
  5. Enable the button, customize colors, icon, position, and scroll offset.
  6. Save changes and preview your site.

Tip: Many popular WordPress themes like Astra, GeneratePress, and Kadence already include a built-in back to top button option in the theme customizer. Check Appearance > Customize before installing a plugin.

Method 4: Back to Top Button for Squarespace, Wix, and Other Builders

Website builders handle this feature differently. Here is a quick guide for the most common platforms:

Squarespace

  1. Go to your site’s CSS Editor (Design > Custom CSS).
  2. Paste the CSS from Method 2 above.
  3. Add the button HTML via Code Injection (Settings > Advanced > Code Injection > Footer).
  4. Add the JavaScript in the same footer code injection area, wrapped in <script> tags.

Wix

  1. Add a button element to your page using the Wix Editor.
  2. Link the button to the top of the page (use the link option and select “Top of page” or an anchor at the top).
  3. Right-click the button and choose Pin to Screen so it stays fixed as the user scrolls.
  4. Copy the button to all pages if you want it site-wide.

Shopify

Edit your theme.liquid file and add the HTML button before </body>. Add the CSS and JavaScript in the same file or in your theme’s stylesheet and scripts.

Best Practices for Back to Top Button Design and Placement

Adding the button is only half the job. Getting the design and behavior right is what separates a helpful feature from an annoying one.

Placement

  • Lower right corner is the standard and expected position. Users instinctively look there.
  • Keep it away from other floating elements (chat widgets, cookie banners) to avoid overlap.
  • Use a fixed position with a margin of at least 20-30 pixels from the edges.

Visibility

  • Only show the button after the user scrolls down significantly (300-500 pixels is a good range).
  • Use a fade-in animation rather than a sudden appearance for a polished feel.
  • Make sure the button is visible against all background colors on your page. Test on mobile too.

Styling

  • Keep it small but tappable. A minimum of 44×44 pixels is recommended for mobile accessibility.
  • Use a recognizable icon: an upward arrow or chevron works best.
  • Match your site’s color scheme but ensure enough contrast so the button stands out.
  • Add a subtle box shadow to lift the button off the page visually.

Behavior

  • Always use smooth scrolling. A sudden jump to the top feels jarring.
  • The button should disappear when the user is already at the top.
  • Ensure it works on both desktop and mobile devices.

When Should You Skip the Back to Top Button?

Not every site needs one. Here are situations where you can safely leave it out:

  • Your pages are short (fewer than 3-4 screen heights of content).
  • You already use a sticky navigation bar that keeps key links accessible.
  • Your site uses a single-screen or card-based layout with minimal scrolling.

If users are not scrolling much, the button adds visual clutter without real benefit.

Quick Comparison: Which Method Should You Choose?

Method Best For Difficulty Show/Hide on Scroll
HTML + CSS only Static sites, minimal setup Easy No
HTML + CSS + JavaScript Any custom site Medium Yes
WordPress plugin WordPress users who prefer no code Easy Yes
Website builder feature Wix, Squarespace, Shopify users Easy Varies

Frequently Asked Questions

How do I make a back to top button without JavaScript?

Use an anchor element (<a id="top"></a>) at the top of your page and a fixed link (<a href="#top">) styled as a button. This pure HTML and CSS approach works in all browsers. The only downside is you cannot show or hide the button based on scroll position without JavaScript.

Where should I place the back to top button?

The lower right corner of the screen is the most widely accepted position. It stays out of the way of main content while remaining easy to find. Research from the Nielsen Norman Group confirms this is the standard users expect.

Can I add a back to top button in Wix?

Yes. In the Wix Editor, add a button element, link it to the top of the page, then pin it to the screen so it stays visible as users scroll. You can style it with any icon or color that matches your design.

What is a good scroll distance before showing the button?

Between 300 and 500 pixels is a common threshold. This roughly equals one to two screen heights, so the button only appears when users have scrolled far enough to benefit from the shortcut.

Does a back to top button affect SEO?

The button itself does not directly impact search rankings. However, it improves user experience, reduces frustration on long pages, and can indirectly help engagement metrics like time on page and bounce rate.

Should I add smooth scrolling?

Yes. Smooth scrolling provides a much better user experience than an instant jump. Use window.scrollTo({ top: 0, behavior: 'smooth' }) in JavaScript, or add html { scroll-behavior: smooth; } in your CSS for anchor-based solutions.

Final Thoughts

Adding a back to top button is one of those small improvements that can noticeably enhance the browsing experience on your site. Whether you write the code yourself or install a plugin, the implementation takes just a few minutes.

Pick the method that matches your platform, follow the best practices we covered, and test the result on both desktop and mobile. Your visitors will thank you for the extra convenience.

Need help building a website that feels polished down to the smallest details? Get in touch with Interact Studio and let us handle the design and development for you.

Leave a Comment