Free Add Page Scroll to Top Button for Blogger websites

 Free Adding Page Scroll to Top Button

Add Page Scroll to Top button is most generally an image or an icon placed on the bottom of a web-page which has a long content which has to scroll down for a long time to read. This type of websites or web-pages will include a scroll to top or back to top button which scrolls you to the top of the web page automatically in a bit of a second.

If a page contains more content , easily visitor goes to bottom, again read one more time or need to top location of this page, normally use mouse scroll button in computer, but in mobile or tab screen , you can immediate goes to top location very hard or time expensive , so here in this article we explain and use Free adding Page scroll to top button for blogger websites.

Benefits for Page Scroll to Top Button

• Easily move to Top Position of page within second.
• Simple javaScript code to add at a Gadget location
• No programming knowledge require
• Here easy to Change Custom button models, colors, and Shape.

Steps to Setup a Page Scroll to Top Button for blogger websits

Here we explain simple steps to How to Add Page Scroll to Top Button for Blogger websites, directly place code  of javascript and html to one location .

Step 1: First Login to Blogger website. Click Here

Step 2: Go to Layout option in blogger .

Step 3: Now Click on Add a Gadget 

Step 4: Now Select HTML/JavaScript.

Step 5: Here appear/open one dialog box, Now Leave Title Portion

Step 6: Now paste the following code on below content on the dialog box

Step 7: Now Click on SAVE button and also SAVE Arrangement

<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: 20px;
  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>

See Observation , In the above code we change Custom appearance of button placed.

• Read also Auto Setup New Tab for every link in website: Use Technique
• Auto Hide or Show specific <div> tags Based on selection option you choose

Custom Button Setup for Page Scroll to Top

(1) In the code, highlighted red is the color of the button you can change red to any other color by editing it. 

(2) And also Dark Blue is the color you will see when you hover the cursor on the button or place the mouse cursor on top of the button. You can edit it by changing Dark Blue.

(3) Change Shapes: Easily you can change icons. In the above code Yellow color code change with different others code, see some of different code, listed below

• fas fa-arrow-up

• fas fa-long-arrow-alt-up

• fas fa-arrow-circle-up

• fas fa-arrow-alt-circle-up

• far fa-arrow-alt-circle-up

• fas fa-sort-up

• fas fa-chevron-circle-up

• fas fa-caret-square-up

• far fa-caret-square-up

• fas fa-angle-double-up

• fas fa-chevron-up

• fas fa-caret-up

• fas fa-angle-up

• fas fa-hand-point-up

• far fa-hand-point-up