Categories
JavaScript

JavaScript for optimizers #17: Adding a back-to-top button

In this article, we will be adding a back-to-top button.

We’re going to apply the changes below:

We are adding a back-to-top button
We are adding a back-to-top button

The code

Now for the fun part! 

To execute the change, we run the following JavaScript code on the testing page. Try it out for yourself to see it in action!

var btpButton = document.createElement("button");
var btpButtonText = document.createTextNode("Top");
btpButton.appendChild(btpButtonText);

btpButton.setAttribute("onclick", "backToTop()");
btpButton.setAttribute("class", "btpButton wp-block-button__link");

btpButton.style.display = "none";
btpButton.style.position = "fixed";
btpButton.style.bottom = "20px";
btpButton.style.right = "20px";
btpButton.style.zIndex = "99";

document.querySelector("body").appendChild(btpButton);

window.onscroll = function() {
  startScrolling();
};

function startScrolling() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    btpButton.style.display = "block";
  } else {
    btpButton.style.display = "none";
  }
}

function backToTop() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

New syntax

The breakdown starts by going over all the new syntax in the example above. Since this article is part of a series, make sure you check the syntax’s complete documentation in the previous articles.

.onscroll is a property that handles what happens when the scroll event has been triggered.

.scrollTop is a property that allows you to get the number of pixels that an element’s content is scrolled. You can also set this number.

.documentElement is a property that returns the root element of the document.

|| is the OR operator. If one of the operands is true it will return true.

Logic

var btpButton = document.createElement("button");

We start by creating a button element and assigning it to a variable.

var btpButtonText = document.createTextNode("Top");

Then we create a text node that will contain the button text.

btpButton.appendChild(btpButtonText);

We add the button text to our button.

btpButton.setAttribute("onclick", "backToTop()");

Then set an attribute that runs our scroll function when the button is clicked.

btpButton.setAttribute("class", "btpButton wp-block-button__link");

We add some styling to the button using existing classes.

btpButton.style.display = "none";

By default, we want to hide the button with this line. We can set this to a visible state using our functions.

btpButton.style.position = "fixed";
btpButton.style.bottom = "20px";
btpButton.style.right = "20px";
btpButton.style.zIndex = "99";

These four lines set the button in the bottom right corner.

document.querySelector("body").appendChild(btpButton);

We add the button to the DOM.

window.onscroll = function() {

This decides what to do when the window scroll event triggers.

startScrolling();

We trigger a function that we will declare later.

};

We close this function.

function startScrolling() {

We open up the function which will run code on the scroll event.

if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {

Whenever the page scrolls we check if the number of pixels scrolled is bigger than 50.

btpButton.style.display = "block";

Then we can run the code in order to display the button.

} else {
btpButton.style.display = "none";

Otherwise, we want to hide the button.

}

We close the conditional statement.

}

We close the function.

function backToTop() {

We also need to need to declare the function that runs the code when the button is clicked.

document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;

These two lines scroll the page back up for different browsers.

}

We close out the function and finish the script. Good luck with testing!

New resource: How to win your first a/b test on a zero budget?

A zero budget conversion optimization process with Google Optimize and JavaScript.

Download now