How to Add “Back to Top” Button in Blogger (2025 Smooth Scroll Feature)

Improve user navigation and blog professionalism. Learn how to add a stylish, smooth scroll “Back to Top” button in Blogger using simple HTML, CSS, and JavaScript — no plugins needed!

What Is a Back to Top Button?

A “Back to Top” button appears when users scroll down your blog. It allows them to return to the top of the page with a single click.

Why Add It?

Benefit	Why It Matters
✅ Improves user experience	No need to scroll manually
✅ Works on long blog posts	Especially helpful for tutorials & lists
✅ Looks modern and polished	Adds UX friendliness to your design
✅ Increases page engagement	Helps users explore more content easily

How to Add a Smooth “Back to Top” Button in Blogger

Step 1: Go to Blogger → Theme → Edit HTML

Step 2: Add CSS Before `</head>`

Search for </head> and paste this above it:

<style>
#back-to-top {
  position: fixed;
  bottom: 40px;
  right: 20px;
  background: #007bff;
  color: #fff;
  padding: 10px 12px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: none;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}
#back-to-top:hover {
  background: #0056b3;
}
</style>

Step 3: Add Button HTML Before `</body>`

Now scroll to the bottom and paste this just above </body>:

<div id="back-to-top" title="Back to Top">↑</div>
<script>
  const btn = document.getElementById("back-to-top");
  window.onscroll = function() {
    btn.style.display = (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) ? "block" : "none";
  };
  btn.onclick = function() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
</script>

Save and reload your blog.

Test It

Visit a long blog post
Scroll down halfway
The ↑ button appears
Click it — smooth scroll will take you to the top!

Pro Tips

Tip	Why It Helps
Use arrow icon or SVG	Easy to recognize
Match your theme color	Consistent with blog design
Add fade effect (optional)	Smooth visibility transition

Common Errors and Fixes

Problem	Fix
❌ Button not showing	✅ Ensure it's pasted correctly before `</body>`
❌ No smooth scroll	✅ Use `window.scrollTo` with `behavior: smooth`
❌ Button always visible	✅ Only show after scrolling down 200px

A Back to Top Button:

Enhances user navigation
Makes long articles easier to read
Looks professional and clean
Encourages users to explore more of your site

It’s a simple UX win that readers will appreciate!

[Related Posts]