{
"@context": "https://schema.org/",
"@type": "HowTo",
"name": "Add back to top in Oxygen Builder",
"description": "How to add to top button in Oxygen builder",
"totalTime": "PT5M",
"estimatedCost": {
"@type": "MonetaryAmount",
"currency": "",
"value": ""
},
"supply": {
"@type": "HowToSupply",
"name": "PIT Designs"
},
"tool": [{
"@type": "HowToTool",
"name": "Oxygen Builder"
},{
"@type": "HowToTool",
"name": "CSS"
},{
"@type": "HowToTool",
"name": "JS"
},{
"@type": "HowToTool",
"name": "HTML"
}],
"step": [{
"@type": "HowToStep",
"text": "Add Code Block to the Footer template inside Oxygen Editor, and add this HTML code:
},{
"@type": "HowToStep",
"text": "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;
}"
},{
"@type": "HowToStep",
"text": "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;
}"
},{
"@type": "HowToStep",
"text": "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;
}"
}]
}
Project(s) Classified Under Back to Top
