How to add Back to Top Button on your Blogger Blog

Reads 470.1k times, Saturday, February 25, 2023 The WsCoder

To add a "Back to Top" button on your Blogger blog, you can follow these steps:

1. Go to your Blogger Dashboard and click on "Theme" from the left-hand menu

2. Click on "Edit HTML".

3. Scroll down the code until you find the closing </body> tag.

4. Paste the following code just above the </body> tag:

<div class="scroll-top">
  <!-- SVG Icon -->
   <svg height="24px" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">
      <path d="M4,12l1.41,1.41L11,7.83V20h2V7.83l5.58,5.59L20,12l-8,-8 -8,8z"></path>
   </svg>
</div>

<script>	
        var sbt = document.querySelector(".scroll-top");
        window.onscroll = function () {
            sbt.classList.toggle("active", window.scrollY > 380);
            sbt.onclick = function () {
                window.scrollTo({ top: 0, behavior: "smooth" })
            }
        }
</script>

5. Scroll up the code until you find the closing </head> tag.

6. Paste the following code just above the </head> tag:

<style>
 .scroll-top {
    position: fixed;
    right: 30px;
    bottom: -50px;
    background: #0084ff;
    padding: 6px 5px;
    border-radius: 4px;
    transition: all 0.3s;
  }

  .scroll-top svg {
    fill: #fff;
  }

  .scroll-top:hover {
     box-shadow: 0 0 20px #0084ff;
     cursor: pointer;
  }

  .scroll-top.active {
     bottom: 30px;
  }
</style>

7. Save your changes and exit the code editor. and view your blog to see the "Back to Top" button.

How to add Back to Top Button on your Blogger Blog

Linked

Support

Link

Tools