Blogging
Step 2: Add CSS Before
Step 3: Add Button HTML Before
How to Add “Back to Top” Button in Blogger (2025 Smooth Scroll Feature)
Monday, July 7, 2025
0
![]() |
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!
Previous article
Next article
Leave Comments
Post a Comment