customize back to top button

preview:
This is some sample content inside the scrollable container.

Make sure font-awesome does exist in your template or you can copy the following link:


    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

code for the scrollToTopBtn is as follows


    
<style id="scrollToTopBtnStyle">
#scrollToTopBtn {
display: none;
position: absolute; /* Set to absolute position */
border: none;
cursor: pointer;
text-align: center;
bottom: 20px;
padding: 10px; /* Initial padding value */
}
</style>
<button id="scrollToTopBtn" onclick="scrollToTop()"><i class="fas fa-arrow-up"></i></button>
<script>
// Show or hide the button based on scroll position
window.onscroll = function() {
var scrollToTopBtn = document.getElementById("scrollToTopBtn");
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollToTopBtn.style.display = "block";
} else {
scrollToTopBtn.style.display = "none";
}
};
// Scroll to the top of the page
function scrollToTop() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE, and Opera
}
</script>