Blogging
Step 2: Add This CSS Before
Step 3: Add the Button Before
How to Add a "Scroll to Top" Button in Blogger (2025 Stylish Version)
Wednesday, July 2, 2025
0
![]() |
How to Add a "Scroll to Top" Button in Blogger (2025 Stylish Version) |
Improve your blog’s user experience with a stylish scroll-to-top button. This 2025 guide teaches you how to add it to your Blogger blog — no plugin needed!
What is a Scroll-to-Top Button?
A Scroll-to-Top button appears at the bottom of your blog when the user scrolls down. On click, it smoothly takes them back to the top of the page.
Why You Need It
- Enhances mobile usability
- Improves user experience & time-on-site
- Helps users navigate long posts
- Adds a professional touch to your layout
How to Add a Scroll-to-Top Button in Blogger (No Plugin)
Step 1: Go to Blogger → Theme → Edit HTML
Step 2: Add This CSS Before </head>
Search for </head>
and paste this above it:
<style>
#scrollToTop {
position: fixed;
bottom: 30px;
right: 30px;
background-color: #007bff;
color: white;
padding: 10px 14px;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
z-index: 999;
display: none;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
transition: opacity 0.4s;
}
#scrollToTop:hover {
background-color: #0056b3;
}
</style>
Step 3: Add the Button Before </body>
Search for </body>
and paste this above it:
<div id="scrollToTop" title="Go to top">↑</div>
Step 4: Add JavaScript for Functionality
Paste this just after the div above or in the same place before </body>
:
<script>
var scrollBtn = document.getElementById("scrollToTop");
window.onscroll = function() {
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
scrollBtn.style.display = "block";
} else {
scrollBtn.style.display = "none";
}
};
scrollBtn.onclick = function() {
window.scrollTo({top: 0, behavior: 'smooth'});
};
</script>
That’s it — your scroll-to-top button is now live!
Pro Tips for Styling
Idea | Effect |
---|---|
🎨 Use an arrow icon | Looks modern and cleaner |
🕶 Make it semi-transparent | Less distracting on mobile |
🕹 Add smooth animation | Improves feel and engagement |
Common Issues and Fixes
Issue | Solution |
---|---|
❌ Button not showing | ✅ Ensure it’s placed before </body> |
❌ Overlapping footer | ✅ Adjust bottom value from 30px to 60px |
❌ Not smooth scroll | ✅ Use behavior: 'smooth' in JS |
Final Thoughts
A scroll-to-top button improves:
- Navigation on long posts
- User satisfaction (especially mobile)
- Overall site professionalism
It’s a simple but powerful tweak to your Blogger blog.
Previous article
Next article
Leave Comments
Post a Comment