Add Scroll Up ( Top Up) Button into Blogger

Go to Blog Click Layout > Add a gadget > HTML/JavaScript then copy following Code and Past Here



<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous" />

<style>


#myBtn {
  display: none;
  position: fixed;
  bottom: 100px;
  right: 30px;
  z-index: 99;
  color:darkblue;
  border: none;
  outline: none;

  
  cursor: pointer;

}

#myBtn:hover {

    color:red;
 box-shadow: inset 0 0 0 3px #3a7999;
    border-radius: 100%;
   
   
}
</style>



<i class="w3-xxlarge fas fa-arrow-circle-up" onclick="topFunction()" id="myBtn" title="Go to top"></i>



<script>
// 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) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

Comments


  1. Very Informative and creative contents. This concept is a good way to enhance the knowledge. thanks for sharing.
    Continue to share your knowledge through articles like these, and keep posting more blogs.
    And more Information JavaScript Development Services

    ReplyDelete

Post a Comment

Popular posts from this blog

Add Refresh Button Into Blog (Blogger)

Add Login Page into Blogger