Watch JavaScript, CSS and PHP work together with your own Return to Top button

A good designer with a Zen mindframe and a good sense of humor might say, “The best user interface is no interface at all!”. Actually, a great many minds have already said that.

One of my favorites is the “Return to Top” button, which on a long scrolling page makes it easy for you to roll back stylishly to the top of the page without all that awkward finger-sliding on your phone or frantically spinning the mouse wheel on your desktop.

Return to Top on this site and on So There’s That is an unobtrusive, spare icon that pops up in the lower right-hand corner when you scroll a certain amount down the page. It stays there, out of the way, until you click it or until the page finds itself back at  the top. At that point, it disappears again.

Handy, isn’t it? I like it because it stays out of the way until you need it, is simple and clean and doesn’t clutter the page with more distractions. Less is more.

There are many plugins that can achieve this faster than the time it will take you to read this post. Or if you’re adventurous, there are a few code snippets online where you can insert it and move on.

However, take this opportunity instead to do a deep dive into the complex mechanics of something as simple as Return to Top. While the code itself is deceptively straightforward, theme developers will think about wider questions which will change how to actually use it.

Building the Return to Top Button

How does RTT work? In WordPress, it needs a combination of PHP, CSS, and JavaScript. In other words, we need something to show on the screen, how to show it, and when to show it. And don’t forget where to show it – think responsive design and ask yourself if it should appear differently on different devices. However that last point is beyond the scope of this post.

What to show:

PHP writes much of the HTML on your WordPress screen, and for RTT it’s just a tiny snippet:

<?php // template part for return to top button in posts and pages

echo '<a href="#" class="rtt_button"><i class="mdi-navigation-expand-less"></i></a>'; ?>

The link is to the location “#” which is a useful shortcut that pushes you to the top of the same page you are on. The actual icon appears in the `<i>` tags. The CSS class in the `<i>` tag depends on what icon library you use. Start with Font Awesome (which comes packaged with Bootstrap) but get into more.

So where does this snippet go? The short answer is “wherever you want the button to appear”. You will do well to consult your handy Template Hierarchy grid before deciding which template to put it in. Ask yourself: Do you want it on just posts? Pages? Archives? The front page? All of those?

Also, insert the code outside of the Loop, especially for index pages, or WordPress will try to render it as many times as there are post entries on the page. I have not tested this, so I will hazard a guess that this is a bad thing.

Let’s say you just want the RTT button on single posts. Then a good spot would be in the file `single.php`. So just drop it in and you’re done, right? Not so fast – what if it goes into other pages, like `page.php` or `archive.php`? In keeping with the Don’t Repeat Yourself Principle, let’s put that above snippet into a file called `rtt.php` which is saved in the `/inc`folder. Then, in all of your templates where you want RTT to appear, add this line:

<?php get_template_part( 'inc/rtt' );

How to Show It:

The CSS will style your button. The button was assigned the class `rtt_button` so our CSS will look like this:

/* Styling for Return to Top Button */
a.rtt_button {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 5px; }
  a.rtt_button i {
  font-size: 250%;
  color: #6d4c41;
}

When to show it:

The JavaScript on the page will turn the button on and off for you. This is done using jQuery:

jQuery(document).ready(function($) {
  $(window).scroll(function () {
  if ( $(this).scrollTop() > 500 )
    $("a.rtt_button").fadeIn();
  else
    $("a.rtt_button").fadeOut();
  });

  $("a.rtt_button").click(function () {
    $("body,html").animate({ scrollTop: 0 }, 800 );
    return false;
  });
});

Save this in a file called `rtt.js` in your `/js` folder. It depends on jQuery – which already comes packaged with WordPress, and it needs to be properly enqueued on the page. If you are in a child theme (which I hope you are unless you built it from scratch), insert this code:

function rtt_script() {
  wp_enqueue_script( 'rtt-js', get_stylesheet_directory_uri() . '/js/rtt.js', array( 'jquery' ), false, true );
}
add_action( 'wp_enqueue_scripts', 'rtt_script' );

This set up is very similar to what I did on this site and on So There’s That. You can quickly see that it is not as simple as dropping in a line of code and be done with it. Think about how all of the pieces interact, how you want it to appear, and how your code will play nicely with everyone else. Read up in the Codex and elsewhere on things like the template hierarchy, enqueuing scripts, the Loop, and how templates are build. It’s just like building the Legos, one brick at a time.