Basic example
Button to return to the top of the page allows the user to quickly return to the top of the page without making too much effort. This can be very useful when the page has a lot of content.
Use the code below to create button that scrolls back to the beginning of the page.
<!-- Back to top button -->
<button
type="button"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
class="inline-block p-3 bg-red-600 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg transition duration-150 ease-in-out hidden bottom-5 right-5 fixed"
id="btn-back-to-top"
>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
class="w-4 h-4"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
>
<path
fill="currentColor"
d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"
></path>
</svg>
</button>
<!-- Explanation -->
<div class="container mt-4 text-center text-gray-800" style="height: 2000px">
<p class="mb-4">
Start scrolling the page and a strong <strong>"Back to top" button </strong> will appear
in the <strong>bottom right corner</strong> of the screen.
</p>
<p>Click this button and you will be taken to the top of the page.</p>
</div>
// Get the button
let mybutton = document.getElementById('btn-back-to-top');
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = 'block';
} else {
mybutton.style.display = 'none';
}
}
// When the user clicks on the button, scroll to the top of the document
mybutton.addEventListener('click', backToTop);
function backToTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}