PIT Designs Logo
Menu
Close

How to Add Back To Top Button in Oxygen Builder

PIT Designs > Tutorials > How to Add Back To Top Button in Oxygen Builder
Ninos
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:
Tags: | |
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?
5 Easiest Ways to Create Your Ecommerce Website

You can make an ecommerce website for a brick or a packet of tablets. But what is important is how […]

Proven Tips How to Improve Your Content Strategy with Influencer Marketing

One of the best ways to improve your content marketing is with influencer marketing strategy. This will help you reach […]

How to Increase Brand Awareness with Digital Content Marketing

The digital world is more powerful than ever – and its power keeps growing. If you want to survive in […]

Why is Ethical Leadership Important in Business

How many times have we come across peer pressure and do ethically wrong things? Or Like probably favor a candidate […]

The Importance of Having a Website for Business

If you are running a business without a website, it means you are skipping the step of success. In this […]

Sustainable Workplace: How to Create a Sustainable Work Environment

The world has experienced a significant rise in global warming. And this has negatively affected our environment over the years. […]

Instapage vs ClickFunnels: The Ultimate Guide

No matter what your business is, you should have a landing page so that you can turn visitors into subscribers, […]

Leave a Reply to Joko Cancel 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. 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.

    Reply

    1. Hi Jim,
      I think you're missing on the CSS part.. Would you recheck if you have it correctly? or post your page URL, I'll have a look.

      Reply

  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

    Reply

    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)

      Reply

    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

      Reply

    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.

      Reply

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

    Reply

    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 🙂

      Reply

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

    Reply
chevron-downmenu-circlecross-circle