Advertising for home services, such as lawn care, home cleaning, and garden maintenance, isn’t as simple as tossing up an […]
I'm the owner and founder of PIT Designs. I love creating digital presence and creative digital solutions for our clients.
Posted
7 years ago on July 16th, 2019. Last modified on October 29th, 2021
Related To:
Tags: Back to Top | How -To | Oxygen
How applicant tracking systems are revolutionizing remote recruitment
Gone are the days of traditional recruitment. Applicant tracking systems have been revolutionizing how we hire, and their impact is here to stay. But how is the change happening? Tap to learn more about it.
Check out the New AI Features in FlexClip 5.0
In today's digital era, the importance of video content cannot be overstated. Videos have become an integral part of various […]
Effective Cleaning Tips for Maintaining a Clean and Healthy Home
We’ll explore some practical tips and tricks that will help you establish an effective cleaning routine. You might not realize […]
The Art of Visual Storytelling
How to use visual elements to tell a story Let's start with an interesting fact that will amaze you. Do […]
The Ultimate Guide to Choosing a Great Domain Name for Your Business
Choosing the right domain name for your business is a critical step in building a strong online presence. Your domain […]
6 Mistakes to Avoid When Creating a React-Native App
React Native is a leading cross-platform app development framework that has more than one and half thousand active contributors. The […]
Will Elon Musk Turn Twitter into a Super-App?
Elon Musk envisions a future where mobile apps are consolidated into one-stop shops within a single platform. Will he create a "super app" to rule them all in 2023? Learn about the challenges he faces and the potential impact on companies like Twitter and Apple's App Store.
The 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, with one click. Without having to scroll all the way back up. Especially on blog posts, with long articles. 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:
Table of Contents
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:
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.