How to Add a ‘Scroll to Top’ Button to Your WordPress Site

“Back to top” and “scroll to top” buttons have become a standard UX pattern, especially on content-heavy sites viewed on mobile. Once a visitor scrolls past a certain point, the button fades in and lets them jump back to the top in one click.

I added one to this blog after a reader mentioned he’d appreciate a quick way back up – most posts here are fairly long. Scroll down and you’ll spot it on the left side.

What surprised me was how often people actually use it. I attached a Google Analytics event to track clicks, and the numbers were higher than I expected. I’ll show you how to wire up the same tracking so you can measure it on your own site.

Adding a Scroll to Top Button

This button won’t make sense on every site, but if your pages tend to run long, it’s a nice quality-of-life touch – right up there with an exit intent popup or AJAX load more button for keeping visitors engaged. Here’s a lightweight way to add one in WordPress without a plugin.

We’ll start with a small function that outputs the button markup in the footer via the wp_footer hook. The condition below limits it to single posts – adjust or remove it if you want the button site-wide.

Add this to your theme’s functions.php:

<?php
/******* BEGIN HERE *******/
function add_up_button() { ?>
    <div id="up_btn"><a href="#" title="Go Up!">Up!</a></div>
	<?php
}
add_action( 'wp_footer', 'add_up_button' );

Next, style the button so it floats at the bottom-right corner. The CSS below is just a starting point – tweak colors, size, and position to match your design:

#up_btn {
    position: fixed;
    bottom: 15px;
    right: 10px;
    display: none;
    z-index: 20;
}
#up_btn a {
    display: flex;
    background: #ffd200;
    border-radius: 50%;
    transition: all 200ms linear;
    color: #2d2d2d;
    direction: ltr;
    font-weight: 600;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
}

#up_btn a:hover {
    background: #2d2d2d;
    color: #ffd200;
}

Now for the JavaScript. The script listens for scroll events, shows the button once the user scrolls past a threshold (1700px in this example), and smoothly scrolls to the top on click.

Add this to your theme’s JS file. If you need help loading JS files in WordPress, see my guide on enqueueing scripts and styles.

jQuery version

function scroll_to_top_btn() {
    var up_btn = $('#up_btn');

    $(window).scroll(function(){
        if ($(this).scrollTop() > 1700) {
            up_btn.fadeIn(300);
        } else {
            up_btn.fadeOut(300);
        }
    });

    up_btn.click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
}

scroll_to_top_btn();

Vanilla JavaScript version (no jQuery)

If your theme doesn’t rely on jQuery, you can drop the dependency entirely. This version uses window.scrollTo() with behavior: 'smooth' instead of jQuery’s animate():

document.addEventListener('DOMContentLoaded', function () {
    var btn = document.getElementById('up_btn');
    if (!btn) return;

    window.addEventListener('scroll', function () {
        btn.style.display = window.scrollY > 1700 ? 'block' : 'none';
    });

    btn.addEventListener('click', function (e) {
        e.preventDefault();
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
});

Adjust the 1700 threshold to control when the button appears. A lower value shows it sooner; a higher value waits until the user has scrolled further.

Now let’s see how to track clicks on this button in Google Analytics.

Adding a GA4 Analytics Event for the Scroll to Top Button

If you use Google Analytics 4 with the gtag.js snippet, you can track clicks on this button with a custom event. The jQuery version:

$("#up_btn").on('click', function() {
    gtag('event', 'up_button_click', {
        'event_category': 'UX',
        'event_label': 'Scroll to Top'
    });
});

And the vanilla JS equivalent:

document.getElementById('up_btn').addEventListener('click', function() {
    gtag('event', 'up_button_click', {
        'event_category': 'UX',
        'event_label': 'Scroll to Top'
    });
});

After deploying, open GA4’s Realtime report to confirm events are firing. The custom event will also appear under Reports > Engagement > Events once data accumulates.

Accessibility Tips

A couple of quick wins to make the button accessible:

Add an aria-label – if the button text is short or icon-only, screen readers need context. Update the markup to include it:

<div id="up_btn">
    <a href="#" aria-label="Scroll back to top" title="Go Up!">Up!</a>
</div>

Respect reduced motion – some users have prefers-reduced-motion enabled in their OS. If you use the vanilla JS version, you can check this preference and skip the animation:

var motionOK = !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
window.scrollTo({ top: 0, behavior: motionOK ? 'smooth' : 'auto' });

Now let’s add an infinite scroll feature to your reading list – or keep it simple with a scroll-to-top button. Either way, small UX details like these make a real difference.