Scroll To Top Using Code (CSS)

Estimated reading: 4 minutes 147 views

A Scroll to Top button might seem like a small detail, but it can make a big difference in how visitors experience your website. As users scroll through long pages—whether it’s a blog post, product list, or gallery—it becomes inconvenient to manually swipe or scroll all the way back up. That’s where the Scroll to Top button shines. With just a single click, your visitors can smoothly return to the top of the page, saving time and effort.

This little button not only improves usability and navigation, but also shows that you care about your visitors’ comfort and convenience. It’s especially helpful on mobile devices where scrolling can feel tedious. Plus, when styled to match your website’s branding, it becomes a subtle yet polished feature that enhances your site’s overall look and feel. It’s a small touch that adds a whole lot of user-friendliness.

Getting Started

To add a Scroll to Top button to your website, simply insert a small HTML snippet near the bottom of your page, style it with a bit of CSS to match your design, and include a quick JavaScript function to make it appear after scrolling and smoothly return users to the top when clicked. It’s easy to implement, lightweight, and enhances your site’s navigation—especially for longer pages.

Step 1: Add the Scroll-to-Top Button HTML

Place this inside the <body> tag, ideally just before the closing </body>:

 <button id="scrollToTopBtn" title="Go to top">↑</button>

Step 2: Add the CSS to Style the Button

You can paste this into your site’s CSS (e.g., via Customizer > Additional CSS) or inside a <style> tag in your HTML <head> or footer:

/* Scroll to Top Button Styles */
#scrollToTopBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed position on screen */
  bottom: 20px; /* Distance from bottom */
  right: 20px; /* Distance from right */
  z-index: 99; /* Makes sure it's on top */
  background-color: #333; /* Background color */
  color: white; /* Text color */
  border: none;
  padding: 15px;
  border-radius: 50%; /* Circular shape */
  cursor: pointer;
  font-size: 18px;
}

#scrollToTopBtn:hover {
  background-color: #555; /* Darker on hover */
}

Step 3: Add the JavaScript to Make It Work

This part reveals the button when the user scrolls down and scrolls the page back to the top when clicked:

<script>
  // Get the button
  const scrollToTopBtn = document.getElementById("scrollToTopBtn");

  // Show button after scrolling down 300px
  window.onscroll = function () {
    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
      scrollToTopBtn.style.display = "block";
    } else {
      scrollToTopBtn.style.display = "none";
    }
  };

  // Scroll to top when button is clicked
  scrollToTopBtn.addEventListener("click", function () {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  });
</script>

📝 This code injects the HTML + JavaScript into your site’s footer.

Final Tips:

You can change the arrow (↑) to an icon if you’re using something like Font Awesome.
Adjust padding, size, and colors to match your site’s design.

Where to Add The Code

Using a plugin is by far the safest method and is beginner friendly if you’re not used to editing theme files.

Step 1:

Search for WPCode Lite plugin in your website dashboard.
Install and activate the plugin.
Go to Snippets > Add New.
Give your snippet a name like “Scroll to Top Button – Javascript.”
Paste the JavaScript code above.
Choose “Only run on site front-end”.
Choose PHP, not CSS or any other.
Save, activate, close.

Step 2:

Go to Snippets > Add New.
Give your snippet a name like “Scroll to Top Button – CSS.”
Paste the CSS code above.
Make your preferred changes.
Choose CSS, not PHP or any other.
Save, activate, close.

Or go to your Customizer > Additional CSS, paste the CSS code, then publish.

✅ Done!

NOTE: We use WPCode Lite because it’s more flexible than others, there’s no need to upgrade to pro unless you’re a developer, it offers many free snippets, can choose where to run it, won’t publish if the code is wrong so won’t break your site, PHP is included compared to others you have to buy the their pro, and best of all the free version can easily be downloaded from your WordPress Repository.

Scroll To Top Using Code (CSS)

Getting Started

Step 1: Add the Scroll-to-Top Button HTML

Step 2: Add the CSS to Style the Button

Step 3: Add the JavaScript to Make It Work

Final Tips:

Where to Add The Code

Step 1:

Step 2:

Leave a Reply Cancel reply

CONTENTS

Join The Party For Fun Updates freebies & Big Discounts!

your Presence Matters!

Quick Links

Hire Us

Help

Summer Steal: Any Theme 50% OFF Use code SUMMEROFFER50

Subscribe