Blogger: Scroll‑To‑Top Button

Below is a complete, copy‑and‑paste ready snippet that you can drop into any Blogger (blogspot) XML template.

It creates a small “scroll‑to‑top” button that sits in the lower‑right corner of the screen and fades in/out as you scroll.

How to add it

Open your Blogger dashboard → Theme → Edit HTML.

In the template editor, find the closing </body> tag (or any place before it).

Paste the entire block that starts with <style> and ends with </script> right before </body>.

Save your theme.

The code uses only vanilla JavaScript, so no external libraries are required.

<!-- ======== Scroll-to-Top Button ======== -->
<style>
  /* The button itself */
  #scrollToTopBtn {
    position: fixed;
    bottom: 30px;          /* distance from the bottom of viewport */
    right: 30px;           /* distance from the right side of viewport */
    z-index: 9999;         /* stay on top of everything else */
    width: 48px;
    height: 48px;
    border-radius: 50%;    /* make it circular */
    background-color: #555;/* default colour – change as needed */
    color: white;
    font-size: 24px;
    line-height: 48px;     /* vertical centering of the icon */
    text-align: center;
    cursor: pointer;
    opacity: 0;            /* start hidden */
    transition: opacity .4s ease-in-out, background-color .3s;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
  }
  #scrollToTopBtn:hover {
    background-color: #333;/* darker on hover */
  }
  /* Show the button when it has class 'show' */
  #scrollToTopBtn.show { opacity: 1; }
</style>

<div id="scrollToTopBtn" title="Back to top">&#8679;</div> <!-- ▲ or &#x21E7; -->

<script>
(function(){
  var btn = document.getElementById('scrollToTopBtn');

  // Show/hide button based on scroll position
  window.addEventListener('scroll', function() {
    if (window.pageYOffset > 300) {   // show after scrolling down 300px
      btn.classList.add('show');
    } else {
      btn.classList.remove('show');
    }
  });

  // Smooth scroll to top when button is clicked
  btn.addEventListener('click', function() {
    window.scrollTo({top:0, behavior:'smooth'});
  });
})();
</script>
<!-- ======== End of Scroll-to-Top Button ======== -->

What each part does Section

Section	Purpose
CSS (#scrollToTopBtn)	Styles the button: fixed position, circle, colors, transition effects.
HTML (<div>)	The actual button element. Uses a Unicode arrow (&#8679; ▲). You can swap it for an image or Font Awesome icon if you prefer.
JavaScript	1. Listens to scroll events – shows the button after scrolling past 300 px, hides it otherwise. 2. On click, smoothly scrolls back to the top of the page.

Customisation tips

• Button colour: change background-color in the CSS block.
• Size/position: modify bottom, right, width, height.
• Scroll threshold: adjust the number 300 in the script if you want it to appear earlier/later.
• Icon: replace the arrow with an image or Font Awesome icon by editing the innerHTML of #scrollToTopBtn.

That’s all! Your Blogger site will now have a tidy, responsive scroll‑to‑top button that works on desktop and mobile.