How to add scroll back to top button in blogger blogspot

Scroll to top button blogger

Learn how to add scroll to top button in blogger blogspot

Many of bloggers want to add back to top button in Blogspot but they don't know how to add and use it properly in this article you can learn how to add a scroll to top button with code provided below.

Steps to add back to top button

Go to the blogger and click on the layout option on the left menu.
Now click on add gadget.
A new window appears next click on Html/javascript that is in 4th place.
Now place the below-provided java/Html script.
After placing click on save option.

<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: green;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
</style>
</head>
<body>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>


<script>
//Get the button
var mybutton = document.getElementById("myBtn");

// 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
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

</body>
</html>

After placing You get a button like below image
Now if you want to edit colors, text follow below simple steps

To edit back to top button color stylish

Background:

Find below tag in above-provided code

background-color: green;

In the place of green replace with your favorite color

If you want to do coloring deeply use Html color code by visiting

this link.

https://www.w3schools.com/colors/colors_picker.asp

After choosing a color in Html place the Hexa value in the place of green

example: if you want to use dark blue the code looks like #002080

Hover background:

If you want to edit hover color (Hover means - if you place mouse on the button it changes the color that color is known has hover background )

Find #my btn;hover { background-color: #555;

Replace the color as per the above procedure.

To edit the text in the back to top button

In the code you can find

In the place of the above highlighted, underline the top word

change your text like go up or any other else.

Thank you subscribe for more latest updates on blogger tricks.

Search This Blog

Madhura electronics - Learn tech tips & blogging tricks