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

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;
}

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!