How To Add a Sticky Back to Top Button to Your Website

We’ve all been there. You’ve found a fantastic online guide, scrolled all the way to the bottom, and then think, “Wow, I’d love to see what else this site has to offer!” 

But then you have to scroll.

ALL. 

THE. 

WAY.

TO.

THE.

TOP.

And then you think…. “Hmmm, never mind.” And close the page. 

What is a sticky back to top button?

Also known as a scroll-to-top button or go-to-top image, the sticky back to top button is a helpful navigation element that helps users get back to the top of the web page they’re viewing. A common UI pattern is to place this button in the lower right-hand corner of the screen, making it “sticky” via a fixed position so it’s always accessible as the user scrolls down the page. 

Things to consider before adding a back to top button

Like any popular design trend, we encourage you to take a step back before implementing it on your site to ask yourself: If I’m going to build this, what back top button guidelines do I need to follow? 

Here are a few questions to answer before you build your scroll-to-top button:

• Where will it be placed?
• How big (or small) should it be?
• What design patterns should you follow so it stays on brand? (Think colors, fonts, icons, etc.)
• Is it at risk of covering important site content, such as information in a sidebar? 
• What happens on mobile devices? Will it be responsive? 
• Do you actually need it?*

*Note: You could make the argument that users today are conditioned to scroll down (and back up!) on a page, which would eliminate the “need” for a back to top button. Our advice: Test it! Add a Google Analytics event on click or use a heat map tool like Hotjar to see how your site visitors engage with the page. 

The best “best practice” to follow is one based on data from your own site and users!

How to add a sticky back to top button to your WordPress site

In this tutorial, we’ll show you how to add a back to top button. 

Pro-tip: While this tutorial isn’t too advanced, we still recommend trying it out on a staging site or in local environment, so there’s absolutely no risk to your live site. If you need to set one up quick, check out Local, a free local WordPress app that’s incredibly easy to use.

For this sticky back-to-top button tutorial, we’ll use three languages:

• HTML for the markup to create the button
• CSS to style the button and have it match your brand
• JavaScript to make it work and define the behaviors of the button

Back to top button HTML

In the HTML, you’ll find the following lines:

u003cpre class=u0022wp-block-syntaxhighlighter-codeu0022u003eu0026lt;a class=u0022top-link hideu0022 href=u0022u0022 id=u0022js-topu0022u0026gt;rn  u0026lt;svg xmlns=u0022http://www.w3.org/2000/svgu0022 viewBox=u00220 0 12 6u0022u0026gt;u0026lt;path d=u0022M12 6H0l6-6zu0022/u0026gt;u0026lt;/svgu0026gt;rn  u0026lt;span class=u0022screen-reader-textu0022u0026gt;Back to topu0026lt;/spanu0026gt;rnu0026lt;/au0026gt;u003c/preu003e

TThis is going to be your sticky back to top button! You can see that we’ve added a CSS class called .top-link, and are using some simple JavaScript to make it work. We’re also using an in-line SVG for the button. 

Besides an SVG, you could also use an image file or font icon to create the button. We prefer the SVG method, however, because: 

1. It won’t get pixelated at different screen sizes, like a raster image would. 
2. SVGs are universally supported across browsers. (Yay, user experience!) 
3. It’s easy to style with CSS, so you can change everything about it really easily. 
4. It only takes one line of code, making it lightweight and better for site performance. 

The last really important piece you’ll find in the HTML is this line:

u003cpre class=u0022wp-block-syntaxhighlighter-codeu0022u003eu0026lt;span class=u0022screen-reader-textu0022u0026gt;Back to topu0026lt;/spanu0026gt;u003c/preu003e

This is critical for users operating with screen readers and will improve the accessibility of your WordPress site. (Think of it like an alt tag for an image, but for your scroll-to-top button!) 

CSS for back to top button

Now let’s talk more about that CSS class, .top-link. We’re using this to actually style up the button, and it’s where you’ll define qualities such as how big it’ll be, how much padding should be around it, the color, etc. 

u003cpre class=u0022wp-block-syntaxhighlighter-codeu0022u003e.top-link {rn  transition: all .25s ease-in-out;rn  position: fixed;rn  bottom: 0;rn  right: 0;rn  display: inline-flex;rn  rn cursor: pointer;rn align-items: center;rn justify-content: center;rn margin: 0 3em 3em 0;rn border-radius: 50%;rn padding: .25em;rn width: 80px;rn height: 80px;rn background-color: #F8F8F8;u003c/preu003e

Note: We’re using Sass (a stylesheet language), to write our CSS a little bit faster. Learn more about this preprocessor here. 

A couple important pieces from this snippet: transition: all .25s ease-in-out; controls how “fast” your button will appear or disappear on the screen, and position: fixed; is what makes the button “stick” to the location you want it.

Next, you’ll see rules for .show and .hide. We’ll use JavaScript to switch between these classes in order to tell the browser when the button should (or shouldn’t) appear on the page. 

u003cpre class=u0022wp-block-syntaxhighlighter-codeu0022u003e  .show {rn    visibility: visible;rn    opacity: 1;rn  }rn  rn  .hide {rn    visibility: hidden;rn    opacity: 0;rn  }u003c/preu003e

Before we go into the JavaScript, there are just a few more lines we’ll add to the CSS.

u003cpre class=u0022wp-block-syntaxhighlighter-codeu0022u003esvg {rn fill: #000;rn width: 24px;rn height: 12px;rn}rnu0026amp;:hover {rn background-color: #E8E8E8;rn tsvg {rnt fill: #000000;rnt}rn}u003c/preu003e

These classes will stylize the SVG image for the arrow itself and tell the browser how to display the button when a user hovers over it.

Finally, we’ll add some CSS to hide the text that says “back to top” for screen readers.

u003cpre class=u0022wp-block-syntaxhighlighter-codeu0022u003e// Text meant only for screen readers.rn.screen-reader-text {rntposition: absolute;rntclip-path: inset(50%);rntmargin: -1px;rntborder: 0;rntpadding: 0;rntwidth: 1px;rntheight: 1px;rntoverflow: hidden;rntword-wrap: normal !important;rntclip: rect(1px, 1px, 1px, 1px);rntu0026amp;:focus {rnttdisplay: block;rntttop: 5px;rnttleft: 5px;rnttz-index: 100000; // Above WP toolbarrnttclip-path: none;rnttbackground-color: #eee;rnttpadding: 15px 23px 14px;rnttwidth: auto;rnttheight: auto;rntttext-decoration: none;rnttline-height: normal;rnttcolor: #444;rnttfont-size: 1em;rnttclip: auto !important;rnt}rn}u003c/preu003e

JavaScript for back to top button

Now on to the JavaScript! We’re going to do this without loading jQuery, which will help keep your code lightweight and quick to load.

The first variable will help the browser find the button.

u003cpre class=u0022wp-block-syntaxhighlighter-codeu0022u003e// Set a variable for our button element.rnconst scrollToTopButton = document.getElementById('js-top');u003c/preu003e

Next, we’ll create a function that shows the scroll-to-top button if the user scrolls beyond the height of the initial window.

u003cpre class=u0022wp-block-syntaxhighlighter-codeu0022u003econst scrollFunc = () =u0026gt; {rn  // Get the current scroll valuern  let y = window.scrollY;rn  rn  // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!rn  if (y u0026gt; 0) {rn    scrollToTopButton.className = u0022top-link showu0022;rn  } else {rn    scrollToTopButton.className = u0022top-link hideu0022;rn  }rn};u003c/preu003e

We’ll also add an event listener, which will watch as the user scrolls (so we know where they’re at on the page).

u003cpre class=u0022wp-block-syntaxhighlighter-codeu0022u003ewindow.addEventListener(u0022scrollu0022, scrollFunc);u003c/preu003e

Almost done! Next, we need to define the function that makes the button actually take the user back to the top of the page. To do that, we’ll create a variable for the number of pixels we are from the top of the page. If that number is greater than 0, the function will set it back to 0, taking us to the top!

We’ll also add a little animation here, so the jump isn’t too sudden.

u003cpre class=u0022wp-block-syntaxhighlighter-codeu0022u003econst scrollToTop = () =u0026gt; {rn  // Let's set a variable for the number of pixels we are from the top of the document.rn  const c = document.documentElement.scrollTop || document.body.scrollTop;rn  rn  // If that number is greater than 0, we'll scroll back to 0, or the top of the document.rn  // We'll also animate that scroll with requestAnimationFrame:rn  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFramern  if (c u0026gt; 0) {rn    window.requestAnimationFrame(scrollToTop);rn    // ScrollTo takes an x and a y coordinate.rn    // Increase the '10' value to get a smoother/slower scroll!rn    window.scrollTo(0, c - c / 10);rn  }rn};u003c/preu003e

Last but not least, we just need to tell the page to run that function when someone clicks our sticky back-to-top button.

u003cpre class=u0022wp-block-syntaxhighlighter-codeu0022u003e// When the button is clicked, run our ScrolltoTop function above!rnscrollToTopButton.onclick = function(e) {rn  e.preventDefault();rn  scrollToTop();rn}u003c/preu003e

That’s it! You’ll now have a fully functioning and customizable sticky back to top button on your WordPress site.

If you want even better performance from your site, turn to WP Engine and our hosting for WordPress sites to push your digital presence to the next level!