How do I add a scroll to the top button in WordPress?

by

How to Add a Scroll to Top Button in WordPress (Easy Guide)

A scroll to top button helps users quickly go back to the top of your page. It improves user experience and makes your website feel more professional.

If you are using WordPress, you can add this feature easily. Below are simple methods you can follow.

✅ Method 1: Add Scroll to Top Button Using Code (Best for Control)

This method works on any WordPress site. You just need to add HTML + CSS + JavaScript.

Step 1: Add HTML Button

Paste this code inside your website (footer or page):

<button id="scrollTopBtn" title="Go to top">↑</button>

Step 2: Add CSS Styling

Add this in your theme’s CSS or inside a <style> tag:

#scrollTopBtn {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 20px;
  z-index: 9999;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #1202BF;
  color: white;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

#scrollTopBtn:hover {
  background-color: #000;
}

Step 3: Add JavaScript

Add this before closing </body> tag:

<script>
let mybutton = document.getElementById("scrollTopBtn");

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

mybutton.onclick = function() {
  window.scrollTo({top: 0, behavior: 'smooth'});
};
</script>

✅ Result:

  • Button appears after scrolling down
  • Smooth scroll to top on click
  • Mobile-friendly

✅ Method 2: Add Scroll to Top Button Using Plugin (No Coding)

If you don’t want to use code, you can use plugins.

Popular options:

  • WPFront Scroll Top
  • Scroll Back to Top
  • To Top Button

Steps:

  1. Go to WordPress Dashboard
  2. Click Plugins → Add New
  3. Search “Scroll to Top”
  4. Install and Activate
  5. Customize button style

✅ Method 3: Add via Theme Customizer (Some Themes Only)

Some premium themes already have this feature.

Steps:

  1. Go to Appearance → Customize
  2. Look for “Scroll to Top” option
  3. Enable it

🔥 Pro Tips (SEO + UX)

  • Keep button small and clean
  • Place it at bottom right corner
  • Use smooth animation
  • Don’t block content

✅ Advanced Version (Better UI Button)

You can use this improved button:

<button id="scrollTopBtn">⬆ Back to Top</button>

It looks more professional and improves clicks.

❌ Common Mistakes

  • Button not showing → JS not added properly
  • Not working → wrong placement of script
  • Overlapping → fix CSS position

✅ Final Thoughts

Adding a scroll to top button in WordPress is simple. You can use:

  • Code (best control)
  • Plugin (easy)
  • Theme option (quick)

This small feature can improve user experience and keep visitors engaged longer.

Leave a Comment