How to Add a Back to Top Button in Blogger

A "Back to Top" button is a useful navigation feature that allows readers to quickly return to the top of your blog post with a single click. This is especially helpful for longer articles where readers would otherwise need to scroll extensively to get back to the top. In this guide, we'll show you how to add a stylish, functional back-to-top button to your Blogger site.

Why Add a Back to Top Button?

Before diving into the implementation, let's understand why this feature is beneficial:

Improved User Experience: Makes navigation easier for your readers
Reduced Bounce Rate: Encourages readers to explore more of your content
Mobile-Friendly: Particularly helpful for mobile users who might be scrolling through long articles
Professional Touch: Adds a polished, user-friendly element to your blog

Step 1: Access Your Blogger Template

To begin, you'll need to access your Blogger template editor:

Log in to your Blogger account
Select the blog you want to edit
From the left sidebar, click on "Theme"
Click on the "Edit HTML" button (you may need to confirm with "I understand and wish to continue")

Step 2: Add the CSS Styles

Look for the </head> tag in your template. Just before this tag, add the following CSS code:

<style type="text/css">
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: #ff5a1f;
  color: #ffffff;
  cursor: pointer;
  border-radius: 50%;
  display: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.back-to-top:hover {
  background: #ff8a4c;
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
</style>

This CSS creates a circular button with an orange background (you can change the color by modifying the #ff5a1f hex code). The button includes hover effects for a more interactive feel.

Step 3: Add the HTML and JavaScript

Now, find the </body> tag in your template. Just before this tag, add the following HTML and JavaScript code:

<div class="back-to-top" title="Back to Top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <polyline points="18 15 12 9 6 15"></polyline>
  </svg>
</div>

<script type="text/javascript">
// Back to Top Button
(function() {
  var backToTop = document.querySelector('.back-to-top');

  // Show/hide the button based on scroll position
  window.addEventListener('scroll', function() {
    if (window.pageYOffset > 300) {
      backToTop.style.display = 'block';
    } else {
      backToTop.style.display = 'none';
    }
  });

  // Smooth scroll to top when clicked
  backToTop.addEventListener('click', function(e) {
    e.preventDefault();
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
})();
</script>

This code adds the button with an arrow icon and the JavaScript that controls its behavior. The button will appear when the user scrolls down more than 300 pixels and disappear when they're near the top of the page.

Step 4: Save Your Template

After adding both code snippets:

Click the "Save" button in the top-right corner
Blogger will save your template and apply the changes
You may need to clear your browser cache to see the changes immediately

Customization Options

You can customize your back-to-top button by modifying the CSS. Here are some options:

Change the Button Color

To change the button color, modify the background property in the .back-to-top CSS class. For example, to make it blue:

.back-to-top {
  /* other properties */
  background: #3498db;
  /* other properties */
}

Change the Button Size

To make the button larger or smaller, adjust the width and height properties:

.back-to-top {
  /* other properties */
  width: 50px;
  height: 50px;
  line-height: 50px;
  /* other properties */
}

Change the Button Position

To move the button to a different corner, modify the bottom and right properties. For example, to place it in the bottom-left corner:

.back-to-top {
  /* other properties */
  bottom: 20px;
  left: 20px;
  right: auto;
  /* other properties */
}

Troubleshooting

If your back-to-top button isn't working correctly, try these solutions:

Button Doesn't Appear

Make sure you've added both code snippets to the correct locations
Check if your template has any conflicting CSS that might be hiding the button
Try increasing the z-index value in the CSS if other elements are overlapping it

Button Appears But Doesn't Work

Check your browser console for JavaScript errors
Make sure jQuery is properly loaded if your template uses it
Try using a simpler version of the scroll function

Conclusion

Adding a back-to-top button to your Blogger site is a simple way to improve user experience and make your blog more professional. With just a few lines of code, you can give your readers an easy way to navigate your content, especially on longer posts.

Remember that the best user experience comes from a combination of good design elements like this button, along with high-quality, well-structured content that keeps readers engaged.

How to Add a Back to Top Button in Blogger

≡Table of Contents