Add Bottom To Top Button In Blogger Blog With HTML CSS

A Bottom to Top button (Scroll to Top button) is a small floating button that appears when a user scrolls down a webpage.

When clicked, it smoothly scrolls the page back to the top.

It improves user experience and makes long pages easier to navigate.

Scroll To Top Button Code : 

<style>

#scrollTopBtn {

  position: fixed;

  bottom: 30px;

  right: 25px;

  width: 45px;

  height: 45px;

  background: #000;

  color: #fff;

  border: none;

  border-radius: 50%;

  cursor: pointer;

  font-size: 18px;

  display: none;

  align-items: center;

  justify-content: center;

  box-shadow: 0 4px 10px rgba(0,0,0,0.3);

  transition: all 0.3s ease;

  z-index: 9999;

}

#scrollTopBtn:hover {

  background: #333;

  transform: translateY(-5px);

}

</style>

<button id="scrollTopBtn">&#8679;</button>

<script>

let scrollBtn = document.getElementById("scrollTopBtn");

window.onscroll = function() {

  if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {

    scrollBtn.style.display = "flex";

  } else {

    scrollBtn.style.display = "none";

  }

};

scrollBtn.onclick = function() {

  window.scrollTo({

    top: 0,

    behavior: "smooth"

  });

};

</script>

• Size → Change 45px to 50px or 60px
• Color → Replace #000 with your brand color
• Position → Change right: 25px to left: 25px
• Icon → Replace the arrow with a Font Awesome icon

You should add the Scroll To Top button code here:

Blogger → Layout → Add Gadget → HTML/JavaScript

Then paste the full code and click Save.

For better performance, you can also place it just before the </body> tag in:

Theme → Edit HTML

Both methods will work properly.

Live Preview of Bottom To Top Button In Blogger :