isotropic-2022
Share
Blog
Search
Menu

Add A “Back To Top Button” To Oxygen Builder

By James LePage
 on July 15, 2020
Last modified on January 6th, 2022

Add A “Back To Top Button” To Oxygen Builder

By James LePage
 on July 15, 2020
Last modified on January 6th, 2022

In this tutorial, we're going to quickly add a back to top button to a website created with the Oxygen Builder.

There are a couple of expensive add-on packs for the Oxygen Builder which include a back to top button, but luckily there are also free methods of doing this that don't require a massive capital outlay.

We are going to be using a code block to do this , as our back to top button is going to be created with JavaScript and styled with CSS. Doing this without a plugin not only results in a faster loading website, but enables you to completely modify all aspects of this functionality.

We're going to be placing this code block directly into the footer template (this tutorial requires you to be using templates), meaning that our JavaScript will not be render blocking.

Why add a back to top button to the Oxygen Builder?

Adding a back to top button to your website created with Oxygen has a whole host of benefits.

If you don't have a sticky menu, a back to top button is a great way to lower your bounce rates. It gives your visitors an easy way to access your menu and additional header links after reading a long article.

By lowering bounce rates, you could increase the revenue generated with your website, and lead to happy visitors. That makes the three minutes it takes to implement and add to top button in the Oxygen Builder definitely worth it.

How to add a back to top button in Oxygen?

Now let's take a look at how to actually add a back to top button into your Oxygen Builder.

The first step is identifying the code that you actually want to use to implement the back to top button In your website. There are tons of examples out there, but we're going to be using a basic snippet which we found on https://www.w3schools.com/howto/howto_js_scroll_to_top.asp.

The code that makes up this back to top button is incredibly simple, easy to implement on the Oxygen Builder, and only displays the button when the user scrolls down the page.

Now that we have our code, let's add a code block to the Oxygen Builder. As stated before, we are going to be adding this code to the footer of our Oxygen website. Keep in mind, this method will apply the back to top button on all pages on your website. Depending on your needs, this may be unwanted. if you only want to apply this button to your blog posts, you can choose to incorporate this code at the bottom of the inner content of your single post template.

Once you've identified where exactly this code is going to be placed, add a code block to the respective location and begin adding your code snippets. First comes the HTML element:

<button onclick="topFunction()" id="oxybtt" title="Go to top">Top</button><button> 

Then we will add the CSS styling. You can add or remove lines as needed.

#oxybtt { display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color: red; /* Set a background color */ color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 10px; /* Rounded corners */ font-size: 18px; /* Increase font size */ } #oxybtt:hover { background-color: #555; /* Add a dark-grey background on hover */ }

Finally, paste in your JavaScript which ties the CSS styling to the HTML element.

//Get the button: mybutton = document.getElementById("oxybtt"); // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } // When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; // For Safari document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera }

Click apply code, scroll up and down the page, and the back to top button should appear.

To make the back to top button fit better into our Oxygen Builder website, we changed the background to white and added a box shadow.

You can also choose to make the button circular by Setting a standard width and height in CSS and making the border radius something like 50 pixels.

You can even replace the text with an icon, as font awesome is included with Oxygen Builder. Keep in mind, if you want to do this, you would either need to include the icon as an SVG path, or host font awesome locally.

Conclusion

This tutorial should have presented you with an easy and free way to add a back to top button to your Oxygen Builder website. With just a little HTML, CSS, and JavaScript, you can have a fully functional button Apply to any aspect of your website. Place it in the footer to add the button to the entire website, or selectively choose templates.

If you have any questions about how to do this, feel free to reach out in the comments.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
David
David
3 years ago

you can replace the text with an icon ?

David
David
3 years ago

How can I replace the text with an icon you can help

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram