How to Add Back To Top Button in Oxygen Builder

Back to Top button is a very useful feature for any website. It provides an easy solution to go back to the top of the page, in one click. Without having to scroll all the way back up. Especially on blog posts, with long articles. You can find some ready-made back to top buttons here. However, in this tutorial we will create our own, and customize it.

Oxygen builder doesn't have the option by default. So to add a back to top button in Oxygen builder, follow these easy steps:

Step One:

In the main template (the one that's active for all pages)

Add a new Code Block at the very bottom (under the Footer section). And in the HTML part of the code block, enter this code:

<button onclick="topFunction()" id="back-top" title="Go to top">⮝</button>

Step Two:

In the same Code Block, add this code to the JavaScript part:

&nbsp;

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

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("back-top").style.display = "block";
  } else {
    document.getElementById("back-top").style.display = "none";
  }
}


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

Step Three:

In the main CSS style sheet, add the following code:

#back-top {
display: none;
position: fixed;
bottom: 2.5em;
right: 0.7em;
border: white;
background-color: #40C351;
color: white;
cursor: pointer;
font-size: 2em;
border-radius: 10px;
padding-bottom: 0;
}

Step Four (Bonus)

Additionally, you can style the CSS as you please. If you want to have the exact same button/effect that we have on PIT Designs website, use this CSS code:

#back-top {
display: none;
position: fixed;
bottom: 2.5em;
right: 0.7em;
border: white;
background-color: #40C351;
color: white;
cursor: pointer;
font-size: 2em;
border-radius: 10px;
padding-bottom: 0;
transition: 1s;
}#back-top:hover {
padding-bottom: 6em;
transition: 2s;
background: transparent;
color: transparent;
}

For any further clarifications/questions. Leave a comment below, or contact us.

5/5 (1 Review)

Leave a Reply

Your email address will not be published. Required fields are marked *

2 comments on “How to Add Back To Top Button in Oxygen Builder”