xxxxxxxxxx1
<a id="top"></a>2
<!-- Back to top button -->3
<a href="#top" type="button" class="btn btn-danger btn-floating btn-lg" id="btn-back-to-top" data-mdb-smooth-scroll="smooth-scroll" data-mdb-duration="2000" data-mdb-easing="easeInQuart">4
<i class="fas fa-arrow-up"></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>19
xxxxxxxxxx1
#btn-back-to-top {2
position: fixed;3
bottom: 20px;4
right: 20px;5
display: none;6
}7
8
#top {9
position: absolute;10
top: 0;11
}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
21
Console errors: 0