xxxxxxxxxx1
<a id="my-top"></a>2
<!-- Back to top button -->3
<a href="#my-top" class="btn btn-danger btn-floating btn-lg" id="btn-back-to-top" data-mdb-smooth-scroll="smooth-scroll" data-mdb-duration="400">4
<i class="fa-solid fa-chevron-up fa-lg"></i>5
</a>6
7
<!-- Explanation -->8
<div class="container mt-4 text-center" style="height: 2000px;">9
<p>10
Start scrolling the page and a strong11
<strong>"Back to top" button </strong> will appear in the12
<strong>bottom right corner</strong> of the screen.13
</p>14
15
<p>16
Click this button and you will be taken to the top of the page.17
</p>18
</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
}17
18
#btn-back-to-top i {19
position: relative;20
margin: 0;21
left: 0px;22
top: 25%;23
color: #fff;24
-webkit-transition: all 0.3s ease;25
-moz-transition: all 0.3s ease;26
-ms-transition: all 0.3s ease;27
-o-transition: all 0.3s ease;28
transition: all 0.3s ease;29
}30
31
#btn-back-to-top:hover {32
background: rgba(0, 0, 0, 0.9);33
}34
35
#btn-back-to-top:hover i {36
font-size: 20px;37
color: #fff;38
top: 6px;39
}xxxxxxxxxx1
const mybutton = document.getElementById('btn-back-to-top');2
3
window.addEventListener("scroll", function() {4
const scrollPosition = window.scrollY;5
6
if (scrollPosition >= 300) {7
mybutton.classList.remove('d-none');8
} else {9
mybutton.classList.add('d-none');10
}11
}); Console errors: 0