Smart CSS Scroll to Top Button Code (Copy & Paste)

Long content is great for SEO, but it can be annoying for users to scroll all the way back up to the navigation menu. A Scroll to Top Button solves this problem instantly, improving the User Experience (UX) of your blog.

In this post, I’m sharing a smart code snippet for a "Back to Top" button. It stays hidden when you are at the top of the page and smoothly fades in as you scroll down. When clicked, it scrolls the page back to the top with a smooth animation.

Why use this Smart Button?

Better UX: It saves your visitors time and effort, keeping them happy.
Auto-Show/Hide: It doesn't clutter your design. It only appears when the user needs it.
Smooth Scrolling: Uses native CSS/JS smooth scrolling for a premium feel, rather than a jumpy effect.
Lightweight: Uses very little code and works perfectly on mobile devices.

Live Preview

The button below demonstrates the design. On your actual blog, it will stick to the bottom-right corner of the screen.

(Scroll down to see the button in action on your site)

HTML & CSS & JS Code

Copy the code below. It includes the HTML for the button, CSS for styling, and a tiny bit of JavaScript to handle the scroll logic. Paste it into an HTML/JavaScript gadget in your footer or at the bottom of your post.

<style>
/* Button Style */
#scrollTopBtn {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  border: none;
  outline: none;
  background-color: #6c5ce7; /* Theme Color */
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  align-items: center;
  justify-content: center;
}

#scrollTopBtn:hover {
  background-color: #555; /* Darker on hover */
  transform: translateY(-5px);
}
</style>

<!-- Button HTML -->
<button onclick="topFunction()" id="scrollTopBtn" title="Go to top">
    <i class="fas fa-arrow-up"></i>
</button>

<!-- Smart Scroll Logic -->
<script>
// Get the button
var mybutton = document.getElementById("scrollTopBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
    mybutton.style.display = "flex";
  } else {
    mybutton.style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document smoothly
function topFunction() {
  window.scrollTo({top: 0, behavior: 'smooth'});
}
</script>

How to Customize

You can easily match this button to your blog's design:

1. Changing the Color

Find background-color: #6c5ce7; in the CSS. Replace the hex code with your brand color (e.g., #ff0000 for red).

2. Changing the Position

If you want it on the left side, change right: 30px; to left: 30px;.

3. Adjusting When it Appears

In the script section, look for the number 300. This is the number of pixels to scroll before the button shows up. Change it to 100 to make it appear sooner, or 500 for later.

Conclusion

This simple addition significantly improves site navigation, especially for mobile users. It's a small detail that makes your blog feel more professional and user-friendly. Add it today and improve your bounce rates!

Copy Paste Web Tips