Long posts = users stuck at bottom. No way up = they close tab. Back to top button = 11% lower bounce rate.
In this tutorial, you'll add a smooth scroll back to top button in Blogger. Follow along and you'll improve mobile UX + keep users browsing in 2025.
Step 1: Why Back to Top Button Matters 2025
Especially critical for mobile where scrolling up is painful.
- Mobile UX: Thumb scrolling 3000px up = user frustration
- More pageviews: Users go back up to click menu/related posts
- AdSense RPM: Users scroll back up = header ads load again
- Core Web Vitals: Better INP score if users can navigate fast
Image: Back to top arrow button in bottom right corner
Step 2: Add Back to Top Button to Blogger Theme
Auto-hides at top. Appears after 300px scroll. Smooth animation.
- Blogger → Theme → Edit HTML → Ctrl+F → Search
</body> - Paste this code ABOVE
</body>:
<style>
/* Back to Top Button */
#backToTop {
position: fixed; bottom: 20px; right: 20px;
background: #1a73e8; color: #fff; border: none;
width: 45px; height: 45px; border-radius: 50%;
cursor: pointer; font-size: 20px; display: none;
z-index: 9999; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
transition: all 0.3s ease;
}
#backToTop:hover {background: #1557b0; transform: translateY(-3px);}
#backToTop.show {display: block;}
@media (max-width:480px){#backToTop{bottom:15px;right:15px;width:40px;height:40px;}}
</style>
<button id="backToTop" onclick="scrollToTop()" title="Back to top">↑</button>
<script>
//<![CDATA[
var backToTopBtn = document.getElementById("backToTop");
window.onscroll = function() {toggleButton()};
function toggleButton() {
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
backToTopBtn.classList.add("show");
} else {
backToTopBtn.classList.remove("show");
}
}
function scrollToTop() {
window.scrollTo({top: 0, behavior: 'smooth'});
}
//]]>
</script>
Step 3: Customize Button Style for Your Brand
Match your blog colors. Change icon if needed.
| Change | Code to Edit | Example |
| Button color | background: #1a73e8; | Red: #ea4335, Green: #34a853 |
| Position | bottom: 20px; right: 20px; | Left side: left: 20px; |
| Icon | ↑ in button | Use ▲ or ⬆ |
| Shape | border-radius: 50%; | Square: border-radius: 6px; |
Step 4: Add SVG Arrow Icon Version
Looks more professional than text arrow. Replace button code with this:
<button id="backToTop" onclick="scrollToTop()" title="Back to top"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M18 15l-6-6-6 6"/> </svg> </button>
Step 5: Test Back to Top Button + Accessibility
- Test 1: Open long post → Scroll down 50% → Button appears → Click → Smooth scroll to top
- Test 2: At top of page → Button must be hidden
- Test 3: Mobile view → Button not blocking content, easy to tap
- Test 4: Keyboard: Tab to button → Press Enter → Must scroll up
- Test 5: PageSpeed → Code must not cause CLS or delay LCP
Bad practice to avoid: Always-visible button. Annoys users at top. Use scroll trigger at 300px min.
Important: If you have sticky header, set button bottom: 80px; so it doesn't overlap. Combine with Reading Progress Bar from Post #46 for best UX. For AMP pages, use amp-position-observer instead. Track clicks in Analytics to see usage.
0 Comments