How to Add Scroll To Top Button in Blogger

Scroll to top or back to top buttons are most generally an image or an icon placed on the bottom of a webpage which has a long content which has to scroll down for a long time to read. This type of websites or webpages will include a scroll to top or back to top button which scrolls you to the top of the webpage automatically in a bit of a second. This but will be fixed at the bottom and will not interfere with the content on the page and only will view after the page is scrolled.

In blogger, this button will be very useful for the readers if the posts are so long and after reading if they want to go to the top of your blog to go to the home page or to access the navigation bar of your website.

Steps to place Scroll to Top Button on your Blogger

Goto Blogger.
Goto Layout.
Click Add a gadget.
Select HTML/JavaScript.
Leave Title blank paste the below code in Content and Save > 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>

Make sure the gadget is inside Page body if your template has a sidebar in layout. If it is not in Page body drag the gadget inside Page body.

Customization

Change Colours

In the code, highlighted red is the color of the button you can change red to any other color by editing it.
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.

Change Shape

You can choose from any of the buttons in the image above as numbered. Change the text highligted in yellow to your favourite icon in the image with text given below which are numbered accordingly with the image.

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

I hope you this post helped you to put a scroll to top button to your blogger if you have any questions or doubts regarding this feel free to comment below and I will reply to every comments as possible.

4 comments:

sufyan YaanJanuary 25, 2021 at 4:49 AM
font awesome is blocked the page loading too much, we can use SVG icon
AnonymousJanuary 25, 2021 at 8:28 AM
Thanks
Virtual Paint ArtMarch 21, 2022 at 3:58 PM
It dont show what code to copy
Deb's AK MinionsMay 5, 2022 at 10:34 AM
Thank you. This is excellent -- worked perfectly. Question -- I picked the hand pointer. When it appears it is dark blue so hard to see with my theme background. Where do I change this, or does it work off the theme?

Pages

BROWzz