PIT Designs Logo

How to Add Back To Top Button in Oxygen Builder

I'm the owner and founder of PIT Designs. I love creating digital presence and creative digital solutions for our clients.


Posted 1 year ago on July 16th, 2019. Last modified on June 7th, 2020

Related To:


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.

3.9/5 (7 Reviews)
Do we all agree that Coffee is the fuel that feeds the free content creating?
How to use WP All Import with Rank Math

Two of our favorite plugins are WP All Import and Rank Math. They're widely used on WordPress websites. Both make […]

6 Ultimate Content Marketing Writing Techniques to Boost Audience Rate

Are you seeking the best ways to improve your content creation? Are you excited to master your marketing development strategy? […]

How to Choose Professional Fonts for Web Design

Fortunately, the days when fonts and colors were chosen at random have long passed. Now each element of the site […]

How to Write Design Brief for Web Design Projects

Got a big web design project coming up? Then you'll need a great design brief for web design, to carry […]

Adobe CC Updates Focused on Collaboration & Remote Work

Adobe's June updates to its Creative Cloud suite comes with changes directly aimed at making collaboration and remote-work better and […]

6 Ways Erbil International Hotel Complies with COVID-19 Safety

Erbil International Hotel, have activated the "Health and Safety program" which ensures customers, from the moment they enter the property until leaving.

Starting Online Business in Iraq

As part of our business launching & partnership programs. We help you kick start your project online, and start making […]

Leave a Reply

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

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

  1. I can't get this to work, It generates an arrow at the very bottom left of the page, inside a white bar. so you only see it when you reach the very bottom.

  2. Neat, but it isn't scrolling for me. I have a sticky header if that makes a difference. Also, what do you mean "main css style sheet"? Where would one find that?
    Thank you

    1. Hi Randall,
      That's any external CSS sheet (if you have a main/master CSS stylesheet)
      Or you can simplely paste the CSS code in the same Code Block (CSS box) you'll use to add the HTML and JavaScript (from Step One)

    1. You can use CSS scroll behavior

      html {
      scroll-behavior: smooth;
      }

      Or Oxygen's builtin smooth scrolling (I haven't tried it but should be straight forward)
      Manage > Settings > Page Settings > Scripts

    1. Hi Azel,
      Did you assign the correct ID?
      Also, if you're using it on the template, remove it from other individual pages.
      It should work. What you see on this blog post is actually setup on a blog template.

  3. Good day Ninos,

    Thank you. Very practical. I have tried the various page options that you mentioned to get the scroll run smooth, but that did not work. Your other suggestion was enough:

    html{
    scroll-behavior: smooth;
    }

chevron-downmenu-circlecross-circle