Back to top button

Add this code to a On Page CSS section

Remember to make the section Outside spacing 0 top and 0 bottom and click Hide in Mobile Layout.

Make the custom code (named Back to top button), 'Make flush' in Desktop Layout

<style>
#btn-back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
}
</style>

<button
type="button"
class="btn btn-danger btn-floating btn-lg"
id="btn-back-to-top"
>
<i class="fas fa-arrow-up"></i>
</button>

<script>

let mybutton = document.getElementById("btn-back-to-top");

window.onscroll = function () {
scrollFunction();
};

function scrollFunction() {
if (
document.body.scrollTop > 200 ||
document.documentElement.scrollTop > 200
) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}

mybutton.addEventListener("click", backToTop);

function backToTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}

</script>

Changing and resizing icon

If you want to change up the icon, pick any other icon from Font Awesome.

If you want to resize the icon add one of these codes behind "fas fa-arrow-up":

fa-2xs
fa-xs
fa-sm
fa-lg
fa-xl
fa-2xl

Adjust te button look-and-feel

You can adjust the shape, colors and size.
Check the code on this page for the added customizations.

If you want to change the time of appearance, change up de number 200 (2x) in the Script.