Scroll Back To Top Button Code Snippet



Useful links

<!DOCTYPE html>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link crossorigin='anonymous' href='' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' rel='stylesheet'/>
    <link href='' rel='stylesheet' type='text/css'/>
      body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 20px;
      #hdo-scroll-top-button {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 30px;
      z-index: 99;
      font-size: 18px;
      border: none;
      outline: none;
      background-color: #1877F2;
      color: white;
      cursor: pointer;
      border-radius: 10px;
      opacity: 0.7;
      #hdo-scroll-top-button:hover {
      background-color: #1877F2;
      opacity: 1;
      #hdo-scroll-top-button i {
      margin-top: 5px;
      font-size: 32px;
Scroll Down
This is about how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.
<script src='' type='text/javascript'></script> <script> $(document).ready(function(){ //add scroll top button $("body").append(''); // Get the button let mybutton = document.getElementById("hdo-scroll-top-button"); // 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) { = "block"; } else { = "none"; } } // When the user clicks on the button, scroll to the top of the document $("#hdo-scroll-top-button").click(function(){ $("html, body").animate({ scrollTop: "0" }); }); }); </script> </body> </html>

Code Repo