When you click on the "To Top Button", you will scroll to the top the web page. This tutorial shows how to implement a beautiful "To Top Button". Bootstrap and Bootstrap Icons are used.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Top Button</title>
<!-- import Bootstrap and Bootstrap Icons -->
<link href="https://unpkg.com/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/bootstrap-icons@1.8.2/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body style="height: 200vh">
<button type="button" class="btn btn-danger btn-lg" id="btn-top">
<i class="bi bi-arrow-up"></i>
</button>
</body>
</html>
Notice:
<link> tags import Bootstrap and Bootstrap Icons.<body> is styled with height: 200vh, this makes the web page is high enough to be scrolled.<button> contains <i class="bi bi-arrow-up"></i> which is an arrow icon from Bootstrap Icons.#btn-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
padding: 0px;
border-radius: 50%;
width: 3rem;
height: 3rem;
}
Notice:
position: fixed; bottom: 20px; right: 20px; makes the button always on the right-bottom corner of the webpage.display: none; makes the button not visible initially. That's because, at the beginning, we are already "on the top" and do not need to use this button.window.addEventListener('load', function () {
let btnTop = document.getElementById("btn-top");
// display the button when user scrolls more than 20px
window.onscroll = function () {
if (
document.body.scrollTop > 20 || document.documentElement.scrollTop > 20
) {
btnTop.style.display = "block";
} else {
btnTop.style.display = "none";
}
};
btnTop.addEventListener("click", function () {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
})
Notice: document.body.scrollTop and document.documentElement.scrollTop are the same, they are both used for compatibility.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Top Button</title>
<link href="https://unpkg.com/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/bootstrap-icons@1.8.2/font/bootstrap-icons.css" rel="stylesheet">
<style>
#btn-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
padding: 0px;
border-radius: 50%;
width: 3rem;
height: 3rem;
}
</style>
<script>
window.addEventListener('load', function () {
let btnTop = document.getElementById("btn-top");
// display the button when user scrolls more than 20px
window.onscroll = function () {
if (
document.body.scrollTop > 20 || document.documentElement.scrollTop > 20
) {
btnTop.style.display = "block";
} else {
btnTop.style.display = "none";
}
};
btnTop.addEventListener("click", function () {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
})
</script>
</head>
<body style="height: 200vh">
<button type="button" class="btn btn-danger btn-lg" id="btn-top">
<i class="bi bi-arrow-up"></i>
</button>
</body>
</html>