How to implement a scroll-to-top button in WordPress

Ever scrolled down a long blog post or product page and wished there was a quick way to jump back to the top? That’s exactly what a scroll-to-top button does — it improves navigation and enhances the user experience by letting visitors return to the top of a page with a single click.

Many modern WordPress themes come with this feature built-in, but if yours doesn’t, you have two options:

1. Use a plugin — the easiest and quickest way to add a scroll-to-top button without touching any code.

2. Implement it manually — a lightweight, customizable approach that keeps your site optimized and avoids potential plugin vulnerabilities.

In this article, we’ll explore both methods, starting with some of the best plugins available and then walking through a simple step-by-step guide to adding a custom scroll-to-top button using CSS and JavaScript.

Whether you prefer a no-code solution or want full control over the feature, you’ll find an approach that works for you.

Adding a Scroll-to-Top Button with a Plugin

If you’re looking for the simplest way to add a scroll-to-top button in WordPress, a plugin is your best bet. With a few clicks, you can add this feature to your site without writing a single line of code.

Many WordPress plugins allow you to do this effortlessly, and some even offer customization options like changing the button's design, position, or animation effects. While this approach is great for beginners, keep in mind that installing unnecessary plugins can slow down your site or introduce security risks.

Let’s explore some of the best options.

1. WPFront Scroll Top

WPFront Scroll Top is one of the most widely used scroll-to-top plugins, and for good reason as it is has over 200,000 active installations.

It offers extensive customization options, allowing you to tweak nearly every aspect of the button’s behavior and appearance. Instead of just a simple arrow, WPFront lets you use custom images, Font Awesome icons, or even text for your button. You can control when it appears, how it animates, and even whether it should hide on mobile or iframe content. If you need a scroll-to-top button that blends seamlessly with your website design, this plugin gives you the flexibility to do just that.

Another standout feature is its smooth scrolling animations, making transitions feel polished rather than abrupt. For users who prefer a controlled user experience, the plugin allows you to set a specific scroll distance before the button appears — perfect for preventing unnecessary clutter.

It is ideal for users who want a fully customizable scroll-to-top button with advanced display options and smooth animations.

2. To Top

If you’re looking for something simple, effective, and fast, To Top is a great choice. With over 70,000 active installations, this plugin is designed for users who want a no-fuss solution that works instantly.

The moment you activate it, To Top automatically adds a floating button that smoothly scrolls users back to the top of the page. While it keeps things minimal, it still offers enough customization to let you tweak the button’s size, position, color, and opacity via the WordPress Customizer. This means you can preview changes in real time without diving into complex settings.

Another reason this plugin stands out is its performance-friendly approach. Unlike feature-heavy alternatives, To Top is lightweight and doesn’t load unnecessary scripts, ensuring that it won’t slow down your website.

This is ideal for users who want a fast, lightweight scroll-to-top button with basic customization options and zero performance impact.

3. Page Scroll to ID

For websites that need more than just a back-to-top button, Page Scroll to ID is an excellent choice. With over 100,000 active installations, this plugin is widely used for creating smooth scrolling experiences across entire pages, making it ideal for one-page websites, landing pages, and long-form content.

What sets this plugin apart is its scroll behavior customization. Instead of just jumping to the top, Page Scroll to ID allows you to control scroll speed, animation effects, and even link highlights. It’s a favorite among developers who need precise scrolling between sections, as it supports both vertical and horizontal navigation.

While it requires a bit more setup than simpler alternatives, the results are worth it—smooth, seamless navigation that enhances user experience and keeps visitors engaged.

It is ideal for websites that need smooth-scrolling navigation beyond just a back-to-top button — especially great for single-page designs and long-scrolling sites.

Implementing a Scroll-to-Top Button Programmatically

Adding a scroll-to-top button manually in WordPress is the best way to keep your site lightweight, secure, and customizable without relying on third-party plugins. Plugins may make things easy, but they often introduce unnecessary scripts, slow down performance, or pose security risks if they’re not properly maintained.

By implementing this feature manually, you have full control over how it looks and functions, and you avoid the potential downsides of using a plugin.

The Quick Approach (Not Recommended)

One way to add a scroll-to-top button is by directly inserting the HTML, CSS, and JavaScript into your WordPress footer. If you’re using a block-based theme, you can do this through the Site Editor without touching any code files.

1. Go to Appearance > Editor.

2. Click on Patterns and select Footer.

3. Click the options menu (⋮) on the last item in the footer and select Add After.

4. Type /custom-html to add a Custom HTML block.

5. Paste the following code inside the block and save:

<div class="scroll-top-button">
    <a href="#page-top">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
            <path d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"></path>
        </svg>
    </a>
</div>

<style type="text/css">
    .scroll-top-button {
        position: fixed;
        bottom: 10px;
        right: 10px;
        opacity: 0;
        transition: all 1s;
        width: 50px;
        height: 50px;
    }

    html {
        scroll-behavior: smooth;
    }
</style>

<script type="application/javascript">
    document.addEventListener("DOMContentLoaded", function () {
        var scrollTopButton = document.querySelector('.scroll-top-button');

        window.addEventListener('scroll', function () {
            if (window.scrollY > 200) {
                scrollTopButton.style.opacity = '1';
            } else {
                scrollTopButton.style.opacity = '0';
            }
        });
    });
</script> 

The code above adds an arrow button to the page and styles it so that it stays fixed at the bottom-right corner. The JavaScript code ensures that the button appears only when you scroll down and disappears when you're at the top.

However, for this to work correctly, we need to define the #page-top anchor so that the button knows where to scroll when clicked.

Navigate to Appearance > Editor, select Header from the list of templates and click on the Advanced panel on the right-hand side. In the HTML Anchor field, enter page-top.

Save the page. When you scroll down and click the scroll-to-top button, it will smoothly scroll back to the top of the page.

While this method works, it’s not a good practice for several reasons, for example, placing JavaScript directly inside the footer can negatively impact performance by increasing page load times, especially on large sites.

A Better Way: Adding It the Right Way in the Theme Code

Instead of adding everything directly in the footer through the Site Editor, we’ll modify the theme files properly to ensure the button is always available, follows best practices, and improves site performance.

Step 1: Adding the Scroll-to-Top Button the Right Way in functions.php

Instead of manually adding the button inside footer.php, we’ll use a WordPress action hook to insert it dynamically. This allows us to keep our theme files clean and maintainable.

Open your theme’s functions.php file and add the following code:

// Add the scroll-to-top button after the footer
function add_scroll_top_button_after_footer() {
    echo '
    <div id="scrollToTop" class="scroll-top-button">
        <a href="#page-top">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
                <path d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"></path>
            </svg>
        </a>
    </div>
    ';
}
add_action('wp_footer', 'add_scroll_top_button_after_footer');

This function tells WordPress: "Hey, whenever you're loading the footer (wp_footer), insert this scroll-to-top button just before closing."

The advantage here is that if you ever need to modify the button’s HTML structure, you can do so without touching footer.php directly. This makes it much safer and easier to manage.

Step 2: Styling the Scroll-to-Top Button in style.css

Next, let’s move the styles into our theme’s style.css file instead of using inline styles. Open style.css and add:

/* Scroll to Top Button */
#scrollToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    width: 50px;
    height: 50px;
}

#scrollToTop.show {
    opacity: 1;
}

By keeping styles separate, WordPress automatically caches them, improving site speed. Now, let’s move JavaScript into an external file.

Step 3: Writing JavaScript in an External File

Instead of placing JavaScript directly inside the footer, we create a dedicated file. Inside your theme folder, go to /assets/js/ (if it doesn’t exist, create it), and inside, create a new file named scroll-to-top.js.

Paste this code inside scroll-to-top.js:

// Back to top button visibility toggle
document.addEventListener("DOMContentLoaded", function () {
    var scrollTopButton = document.querySelector('#scrollToTop');

    window.addEventListener('scroll', function () {
        if (window.scrollY > 200) {
            scrollTopButton.classList.add('show');
        } else {
            scrollTopButton.classList.remove('show');
        }
    });
});

Step 4: Enqueue JavaScript Properly in functions.php

Finally, we need to tell WordPress to load this JavaScript file. In functions.php, add this:

// Enqueue the scroll-to-top script
function jksn_front_end_scripts() {
    wp_enqueue_script('scroll-top', get_stylesheet_directory_uri() . '/assets/js/scroll-to-top.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'jksn_front_end_scripts');

Now, WordPress properly loads the script in the footer, ensuring better performance.

Wrapping Up

Adding a scroll-to-top button in WordPress can be done using plugins for convenience or manually for more control.

Plugins offer a quick setup with customization options, while manual implementation ensures flexibility and performance optimization. The best approach depends on your needs, whether you prefer ease of use or a tailored solution.

Frequently Asked Questions