<!-- Back to top button -->

<button

        type="button"

        class="btn btn-danger btn-floating btn-lg"

        id="btn-back-to-top"

        >

  <i class="fas fa-arrow-up"></i>

</button>

​

<!-- Explanation -->

<div class="container mt-4 text-center" style="height: 2000px">

  <p>

    Start scrolling the page and a red

    <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>

#btn-back-to-top {

  position: fixed;

  bottom: 20px;

  right: 20px;

  display: none;

}

//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;

}