How to Add a Back to Top Button in Blogger (Step-by-Step Tutorial) - KodeRian

When running a blog, small details can make a big difference in user experience. One of those details is a “Back to Top” button. While it may look like a simple addition, it saves visitors from endless scrolling, improves navigation, and helps them get back to the menu or header quickly. In this tutorial, we’ll learn how to add a smooth and stylish Back to Top button in Blogger using CSS, JavaScript, and SVG icons.

Many modern websites already use this feature because it reduces friction for readers. For blogs with long articles—like tutorials, reviews, or guides—the Back to Top button is a real time-saver.

Why Add a Back to Top Button in Blogger?

Before we jump into the code, let’s talk about why this feature is worth adding:

• Improved user experience: Readers can instantly return to the top of the page without manually scrolling.
• Faster navigation: Useful for blogs with non-sticky menus or headers.
• Mobile-friendly: Touch scrolling on long pages can be tiring; one tap fixes that.
• Professional touch: Small UI enhancements like this make your Blogger site feel more polished.

Now let’s build it step by step.

Step-by-Step Tutorial: Create a Back to Top Button in Blogger

Step 1: Open Blogger Theme Editor

1. Go to your Blogger Dashboard.
2. Click on Theme → Edit HTML.

Step 2: Add the CSS Styling

Paste the following CSS inside the <style> section or inside <b:skin> in your theme editor:

.backtotop {
  display: none;
  background: #3c6382;
  color: #fff;
  font-size: 1.4em;
  width: 40px;
  height: 40px;
  line-height: 40px;
  outline: 0;
  z-index: 999;
  bottom: 20px;
  right: 20px;
  position: fixed;
  border-radius: 5px;
  padding: 0;
  text-align: center;
  cursor: pointer;
  opacity: 1;
  transition: all 0.25s;
}
.backtotop svg {
  width: 24px;
  height: 24px;
  transform: rotate(90deg);
  vertical-align: middle;
  transition: all 0.25s;
}
.backtotop:hover {
  background: #0a3d62;
}

Step 3: Add the JavaScript Function

Insert the following jQuery script just before the closing </head> or inside the theme’s JavaScript section:

$(function () {
  $(window).scroll(function () {
    $(this).scrollTop() > 100
      ? $(".backtotop").fadeIn()
      : $(".backtotop").fadeOut();
  }),
  $(".backtotop").click(function () {
    $("html,body").animate({ scrollTop: 0 }, 400);
    return false;
  });
});

Step 4: Add the HTML Back to Top Button

Place this snippet right above the closing </body> tag:

<div class='backtotop'>
  <svg viewBox='0 0 24 24'>
    <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff' />
  </svg>
</div>

Step 5: Save and Test

Click Save Theme, refresh your blog, and scroll down. You’ll see the Back to Top button appear once you’ve scrolled beyond 100px.

Customization Ideas

You can tweak the design to match your blog’s branding. Here are a few ideas:

• Change colors: Replace #3c6382 with your brand’s color code.
• Change icon: Use a different SVG (like an arrow, chevron, or rocket).
• Adjust position: Move it to the left by changing right: 20px; to left: 20px;.
• Rounded button: Set border-radius: 50%; for a circle button.
• Smooth scroll duration: Change 400 in the script to adjust animation speed.

Extra Tips for Blogger Back to Top Button

1. Ensure you’re using jQuery. Most Blogger templates already load it, but if not, add it manually before the script.
2. Test on both desktop and mobile views to ensure button size and position look good.
3. If your template already has sticky navigation, consider placing the button in a subtle corner to avoid redundancy.
4. Combine with “Scroll Down” buttons for long landing pages.

Troubleshooting

The button doesn’t appear

Make sure you scrolled down at least 100px. If not, check your console for errors—jQuery might not be loaded.

The button appears but doesn’t scroll

Double-check the JavaScript snippet. If you’re using multiple scripts, ensure there’s no conflict.

The button overlaps other elements

Adjust the bottom or right values in CSS until it sits comfortably.

I want it always visible

Remove the jQuery scroll function and set display: block; in the CSS to keep it fixed at all times.

Frequently Asked Questions (FAQ)

Do I need coding knowledge to add this?

No. Just follow the copy-paste steps in the right sections of your Blogger theme.

Can I use an image instead of SVG?

Yes. Replace the SVG with an <img src="..."> tag, but SVG is sharper and scales better.

Does this slow down my blog?

The impact is minimal. It’s a lightweight script and won’t affect your loading speed significantly.

Is it mobile-friendly?

Yes. The button works on mobile devices, but you might want to increase the button size for easier tapping.

Conclusion

Adding a Back to Top button in Blogger is one of the easiest ways to improve navigation and make your blog more user-friendly. With just a few lines of CSS and JavaScript, you can give your readers a smoother experience and encourage them to explore more of your content.

If you found this guide useful, don’t forget to bookmark this blog, share it with friends, and subscribe for more Blogger tutorials. Even small tweaks like this can make your blog stand out.