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 2 years ago on July 16th, 2019. Last modified on June 7th, 2020

Related To:


pCloud Lifetime Up to 35% OFF AliDropship Plugin

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 Optimize Marketing Content to Get Hits Among International Customers

Whether you operate as a small business or an international company, reaching out to potential customers worldwide is always a […]

How Mobile Apps Can Help In Optimizing Business Growth

With the increase in the use of smartphones all around the world, businesses nowadays are finding new ways to connect […]

10 Greatest Challenges the Virtual Teams are Facing Now

The advance of technology has made it easy to work with different teams across different geographic locations. A ship manufacturer […]

Emerging Trends & Technologies in the Automobile Sector

The automotive industry is changing substantially as the time passes and the technological innovations are the reason behind this change. […]

5 Famous Entrepreneurs & Their Way to Success

 In business, if you want to reap success, it’s important to look at past stories of successful entrepreneurs. This article […]

5 Effective Customer Engagement Strategies

Do you know that customers are the lifeblood of business? And without them, a business cannot survive?  According to a […]

Extract Data From Any Website with RTILA

Some websites can contain a very large amount of data, such as companies contacts, product details and prices, images, stats, […]

Leave a Reply

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

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

  1. 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.

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

    1. Hi, it must be this part (HTML Code , step one)

      you can change the symbol with "up" and try :

      I tried checking the site schweizer-rechtsanwalt.com but it doesn't seem you've enabled it?
      feel free to send the demo link will check.

      thanks for the coffee 🙂

  3. It's awesome, thanks for the detailed tutorial. I would like to ask is there any way to change the scroll depth for appear the button? i.e. 50% or 60% scroll depth then it appears.

menu-circlecross-circle