xxxxxxxxxx1
<a id="my-top"></a>2
<!-- Back to top button -->3
<button type="button" class="btn btn-floating btn-lg d-flex justify-content-center align-items-center" id="btn-back-to-top">4
<i class="fa-solid fa-chevron-up fa-xl"></i>5
</button>6
<!-- Explanation -->7
<div class="container mt-4 text-center" style="height: 2000px;">8
<p>9
Start scrolling the page and a strong10
<strong>"Back to top" button </strong> will appear in the11
<strong>bottom right corner</strong> of the screen.12
</p>13
14
<p>15
Click this button and you will be taken to the top of the page.16
</p>17
</div>xxxxxxxxxx1
#my-top {2
position: absolute;3
top: 0;4
}5
6
#btn-back-to-top {7
position: fixed;8
bottom: 100px;9
right: 20px;10
width: 50px;11
height: 50px;12
background: rgba(0, 0, 0, 0.7);13
border-radius: 35px;14
-webkit-border-radius: 35px;15
-moz-border-radius: 35px;16
z-index: 999;17
cursor: pointer;18
display: none;19
}20
21
#btn-back-to-top i {22
position: relative;23
margin: 0;24
color: #fff;25
-webkit-transition: all 0.2s ease;26
-moz-transition: all 0.2s ease;27
-ms-transition: all 0.2s ease;28
-o-transition: all 0.2s ease;29
transition: all 0.2s ease;30
}31
32
#btn-back-to-top:hover {33
background: rgba(0, 0, 0);34
-webkit-transform:scale(1.2);35
transform:scale(1.2);36
transition:background-color .3s,-webkit-transform .1s;37
transition:transform .1s,background-color .3s;38
transition:transform .1s,background-color .3s,-webkit-transform .1s;39
position:absolute40
}41
42
#btn-back-to-top:hover i {43
color: #fff;44
transform: translateY(-8px);45
-webkit-transition: all 0.2s ease-in-out;46
-moz-transition: all 0.2s ease-in-out;47
-ms-transition: all 0.2s ease-in-out;48
-o-transition: all 0.2s ease-in-out;49
transition: all 0.2s ease-in-out;50
}51
xxxxxxxxxx1
//Get the button2
let mybutton = document.getElementById("btn-back-to-top");3
4
// When the user scrolls down 20px from the top of the document, show the button5
window.onscroll = function () {6
scrollFunction();7
};8
9
function scrollFunction() {10
if (11
document.body.scrollTop > 20 ||12
document.documentElement.scrollTop > 2013
) {14
mybutton.style.display = "block";15
} else {16
mybutton.style.display = "none";17
}18
}19
// When the user clicks on the button, scroll to the top of the document20
mybutton.addEventListener("click", backToTop);21
22
function backToTop() {23
document.body.scrollTop = 0;24
document.documentElement.scrollTop = 0;25
}26
27
Console errors: 0