Adding a “Scroll to Top” button to WordPress websites

In recent years the popularity of “back to top” or “scroll to top” buttons has risen due to the increased use of mobile devices. When a user scrolls beyond a certain point on your website, this efficient button appears, allowing users to easily and quickly return to the top of your site.

This option is particularly convenient as many people use mobile devices with small screens, resulting in content being displayed in a longer format that requires more scrolling.

So, after asking one of the visitors if they had any ideas to improve the user experience on the Savvy Blog, he pointed out that he would appreciate having a button that smoothly takes him back to the top, given that most posts on this blog are quite lengthy. Therefore, in this post, we will see a way to add a “Scroll to Top” button to WordPress sites just like it appears on this blog (scroll down and you’ll see it on the left side).

I should note that I added an event to analytics to see how many visitors use this button, and the result was quite surprising. It turns out that this button is quite useful on this blog. I will also show you how to add the same event so that you can measure for yourselves whether the scroll to top button is useful on your site.

Adding a Scroll to Top Button

So, of course, this button isn’t relevant for every site, but if it’s relevant for you, here’s a simple way to add a scroll to top button to WordPress sites.

Let’s start with a function that adds the button to the site’s markup and specifies that it will appear in the footer using the wp_footer hook. Note that we’re adding a condition that ensures the button will appear only on post pages, as I don’t want the button to appear on the homepage or other pages.

This code should be placed in the functions.php file:

<?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' );

Now, let’s style the button a bit so that it floats on the bottom right side using CSS. This is just an example, and it’s recommended that you style the button according to your site’s design:

#up_btn {
    position: fixed;
    bottom: 15px;
    right: 10px;
    display: none;
    z-index: 20;
}
#up_btn a {
    display: flex;
    background: #ffd200;
    border-radius: 50%;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    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, let’s add a bit of JavaScript to check how much the user has scrolled the page in pixels. We’ll do this using the scrollTop() function and set that above 1700 pixels, the button will appear for the user. Additionally, we’ll set it so that when the button is clicked, the window will scroll to the top.

We’ll do this using the following code, which you need to add to your JavaScript file that is loaded on your site. If you want to create a new file for this purpose or if you’re interested in how to add JS and CSS files to WordPress sites, take a look at this guide.

In any case, here’s the code:

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

    // Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 1700) {
            up_btn.fadeIn(300);
        } else {
            up_btn.fadeOut(300);
        }
    });

    // Click event to scroll to top
    up_btn.click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });

}

scroll_to_top_btn();

You can change the scroll distance for the button to appear (line 9) and the scrolling speed upon button click (line 14) according to your preferences.

That’s it! But let’s see how to add an event to Google Analytics when a user clicks on this button.

Adding an Analytics Event for the Scroll to Top Button

If you use Google Analytics to track activities on your site, you can use the following code to track the event of a user clicking on this button:

$("#up_btn").on('click', function() {
      ga('send', 'event', 'Links', 'UpButton Clicks', 'User Scrolled to Top');
 });

If you’re interested in learning how to add Google Analytics to your site, take a look at the guide.

So, there you have it — the process of adding a Scroll to Top button to WordPress sites.