How to Add a "Scroll Back to Top" Button in Any Blogger Theme

How to Add a Scroll Back to Top Button in Any Blogger Theme (with SVG Icon)

The "Scroll Back to Top" button improves the usability of your blog, allowing visitors to easily navigate back to the top after scrolling through a long post. In this tutorial, you will learn how to create a stylish, responsive, and dark style-compatible "Back to Top" button using SVG and JavaScript.

Step 1: Backup your theme

Before editing your theme, always create a backup.

Blogger → Theme → Backup → Download

Step 2: Open the text editor

From your Blogger dashboard, go to:

Theme → Edit → HTML

Step 3: Add CSS (Before </head>)

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

<style>
/* Scroll Back to Top Button Styles */
.sbtt {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 20px;
  bottom: 70px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  z-index: 5;
  transform: scale(0);
  transition: transform .3s ease, opacity .3s ease, visibility .3s ease;
}
.sbtt.vsbl {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
.sbtt:hover { opacity: .85; }
.sbtt svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  stroke-width: 1.5;
}
.sbtt svg .b {
  fill: #fff;
  stroke: #e0e0e0;
  opacity: 0.9;
}
.sbtt svg .c {
  fill: none;
  stroke: #6200ee;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  stroke-linecap: round;
}
.sbtt svg .d {
  fill: none;
  stroke: #333;
}
/* Dark Mode (Optional) */
.drK .sbtt svg .b { fill: #2d2d30; stroke: #444; }
.drK .sbtt svg .c { stroke: #bb86fc; }
.drK .sbtt svg .d { stroke: #fff; }
</style>

Step 4: Add HTML + JavaScript (before </body>)

Scroll down to the bottom of your HTML editor and paste this code just above.</body>:

<!-- Scroll back to top button with vegetables -->
<div class='sbtt'>
  <svg onclick='window.scrollTo({top: 0, behavior: "smooth"})' viewBox='0 0 34 34'>
    <circle class='b' cx='17' cy='17' r='15.92'/>
    <circle class='c' cx='17' cy='17' r='15.92'/>
    <path class='d' d='M15.07,21.06 L19.16,17 L15.07,12.94'/>
  </svg>
</div>

<script>
// Scroll Indicator Animation
var circle = document.querySelector(".sbtt circle.c"),
    length = circle.getTotalLength();
circle.style.transition = "none";
circle.style.strokeDasharray = length + " " + length;
circle.style.strokeDashoffset = length;
circle.getBoundingClientRect();

function updateProgress() {
  var scroll = document.documentElement.scrollTop,
      height = document.documentElement.scrollHeight - window.innerHeight;
  circle.style.strokeDashoffset = length - (scroll * length / height);
}
updateProgress();
window.addEventListener("scroll", updateProgress);

// Toggle Visibility
window.onscroll = function () {
  var btn = document.querySelector(".sbtt");
  document.documentElement.scrollTop > 100 ?
    btn.classList.add("vsbl") :
    btn.classList.remove("vsbl");
};
</script>

Code explanation

• .sbtt - Styles the button and hides it until scrolled.
• SVG circle.c- Animated scroll shows progress.
• JavaScript– Makes the button visible and affects smooth editing.

FAQs

Why isn't the button showing?

Check that the HTML and script are right before </body>. Also, scroll down at least 100px to trigger visibility.

Does it work in dark mode?

Yes, if your theme includes the .drK class. If not, you can manually add dark-mode CSS.

Final-Result

Save, scroll — the button will appear. Tap to return to the top!

Conclusion

Improved UX, smoother navigation, and a cleaner, more professional look. This solution is lightweight, mobile-friendly, and supports modern features like SVG animations and dark mode.