How to Add a Back to Top Button in WordPress

A “Back to Top” button allows users to quickly return to the top of a page with a single click. It’s a small but powerful usability feature, especially for long blog posts or pages. You can add one to your WordPress site with just a little HTML, CSS, and JavaScript—or use a plugin if you prefer. Here’s how.

Method 1: Add Back to Top Button with Code (No Plugin)

Step 1: Add the Button Markup

Place this code in your theme’s footer.php just before the closing </body> tag, or use a wp_footer hook in functions.php:

<a href="#" id="back-to-top" aria-label="Back to top">↑</a>

Step 2: Style the Button with CSS

Add this to Appearance → Customize → Additional CSS or your child theme’s stylesheet:

#back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #0073aa;
  color: #fff;
  padding: 10px 14px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 20px;
  display: none; /* hidden by default */
  z-index: 9999;
  transition: background 0.3s ease;
}
#back-to-top:hover {
  background: #005177;
}

Step 3: Add JavaScript for Scroll Behavior

Place this script in your footer.php before </body> or enqueue it properly in functions.php:

<script>
document.addEventListener('DOMContentLoaded', function() {
  const btn = document.getElementById('back-to-top');
  window.addEventListener('scroll', function() {
    if (window.scrollY > 300) {
      btn.style.display = 'block';
    } else {
      btn.style.display = 'none';
    }
  });
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
});
</script>

Now, when users scroll down the page, the button will appear, and clicking it smoothly scrolls to the top.

Method 2: Use a Plugin

If you prefer a no-code solution, install a plugin:

• WPFront Scroll Top – simple, customizable back-to-top button.
• Simple Scroll to Top Button – lightweight and easy to configure.

These plugins let you customize the button’s appearance, position, and animation directly from the dashboard.

Best Practices

• Keep it minimal: A small arrow ↑ is widely recognized and unobtrusive.
• Ensure accessibility: Add an aria-label for screen readers.
• Test on mobile: Position the button where it won’t overlap with chat widgets or sticky menus.
• Performance: Use CSS and native JavaScript for smooth, lightweight functionality.

Summary

1. Add a small anchor link (<a id="back-to-top">) to your site.
2. Style it with CSS so it appears fixed at the bottom corner.
3. Use JavaScript to show/hide the button on scroll and add smooth scrolling behavior.
4. Alternatively, use a plugin for more customization without coding.

By adding a “Back to Top” button, you enhance navigation on long pages, making your WordPress site more user-friendly.

🎨 Want to learn more? Visit our WordPress Customization Hub for tips and advanced techniques.