How to Add a “Scroll to Top” Button to Your WordPress Site Without Plugins

Adding a “Scroll to Top” button to your website improves user experience, allowing visitors to quickly navigate back to the top of your page. Many site owners rely on plugins for this functionality, but installing too many plugins can slow down your site and potentially introduce security risks.

In this article, we’ll show you how to implement a custom Scroll to Top button on your WordPress site using a simple code snippet. This approach is lightweight, secure, and eliminates the need for extra plugins.

Why Avoid Plugins for Simple Features?

Improved Site Speed: Fewer plugins mean faster loading times.
Enhanced Security: Every plugin added increases the risk of vulnerabilities.
Full Customization: By adding your own code, you have full control over the button’s design and functionality.

Step-by-Step Guide to Adding the Scroll to Top Button

1. Understand the Code

Below is the custom code that adds a “Scroll to Top” button to your WordPress website:

/* Scroll To Top */
function add_scroll_to_top_script() {
    ?>
    <!-- Scroll to Top Button -->
    <style>
      #scrollToTopBtn {
        position: fixed;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: -100px;
        right: 20px;
        background-color: #854FF5;
        color: white;
        border: none;
        padding: 15px;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
      }
      #scrollToTopBtn:hover {
        background-color: #432480;
      }
    </style>
    <button id="scrollToTopBtn" title="Back to Top">↑</button>
    <script>
      const scrollToTopBtn = document.getElementById("scrollToTopBtn");
      window.onscroll = function () {
        if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
          scrollToTopBtn.style.bottom = "85px";
        } else {
          scrollToTopBtn.style.bottom = "-100px";
        }
      };
      scrollToTopBtn.onclick = function () {
        window.scrollTo({
          top: 0,
          behavior: "smooth"
        });
      };
    </script>
    <?php
}
add_action('wp_footer', 'add_scroll_to_top_script');

Looking for Professional Web creation services? Youssef Dev offers custom WordPress Website Design to help your business grow online. Get a stunning website tailored to your needs!

2. How the Code Works

CSS Styling:
- The button is styled to be circular, with a purple background and smooth hover transitions.
- The button remains hidden off-screen by default (bottom: -100px) and appears when the user scrolls down (bottom: 85px).
JavaScript Functionality:
- When the user scrolls 200 pixels or more, the button becomes visible.
- On clicking the button, the page smoothly scrolls back to the top.
PHP Integration:
- The code is added to the site using the add_action function, which ensures the button is included in the site’s footer.

3. Adding the Code to Your WordPress Site

Follow these steps to add the code to your site:

Step 1: Access the WordPress Dashboard

Step 2: Navigate to Theme Editor

Go to Appearance > Theme File Editor.
In the right-hand sidebar, locate and click on the functions.php file of your active theme.

Step 3: Insert the Code

Scroll to the bottom of the functions.php file.
Paste the provided code snippet.

Step 4: Save Your Changes

Click Update File to save your modifications.

Step 5: Test Your Site

Visit your site and scroll down to see the “Scroll to Top” button appear.
Click the button to confirm the smooth scrolling functionality.

Customizing the Button

You can easily modify the button’s appearance to match your website’s design:

Change Colors:
Update the background-color and hover styles in the CSS section.cssCopier le codebackground-color: #ff5722; /* Example: Change to orange */
Adjust Position:
Change the right or bottom values to reposition the button.
Resize the Button:
Adjust the width and height properties to make the button larger or smaller.

Benefits of This Approach

Lightweight: This method avoids the overhead of a plugin, keeping your site fast.
Customizable: You have full control over the design and behavior of the button.
No Dependencies: Since no external resources are used, it’s more secure and reliable.

Common Issues and Troubleshooting

Button Not Appearing: Ensure the code is correctly pasted into the functions.php file and that your theme uses the wp_footer hook.
Button Positioning: If the button overlaps other elements, adjust the right and bottom values in the CSS.
JavaScript Errors: Open your browser’s console (F12 > Console) to check for any JavaScript errors and correct them.

Conclusion

By adding a custom “Scroll to Top” button using the provided code, you can improve your website’s functionality without relying on plugins. This approach ensures better performance, enhanced security, and a seamless user experience.

Implement this solution today and take full control over your website’s design and features! 🚀